pagination/navigation arrows do not display in chrome/safari only firefox

[mplusb]

Describe the bug https://wordpress.org/support/topic/html-formatting-doesnt-work/ It seems if the translations are on different domains, Chrome will not display the SVGs because of this error:

• Which browser is affected (or browsers):

• [x] Chrome
• [] Firefox
• [x] Safari
• [ ] Other

Used versions

• WordPress version: 6.0.2
• Strong Testimonials version: 3.0.2

[TeoAlex]

The linked domains should allow for cross site access between them as they are both pointing to the same server and Access-Control-Allow-Origin header should allow the 'sibling" domain.

But, if we want to fix this on our end we can duplicate all of our .svg, convert them to .png, add a filter that adds the css containing the .png and .svg as a snippet and toggle's between them using the .svg by default. - solution by @razvanaldea89

The problems: We generate CSS files from multiple SCSS files, we have multiple .svg icons and multiple cases of when and where to use the icons based on the selected theme and settings so this will be a bit of a big change.

[TeoAlex]

A possible fix is adding this line of code in htaccess: <IfModule mod_headers.c> <FilesMatch ".(eot|otf|svg|ttf|woff|woff2)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch> </IfModule>

Also, we cannot change the color of the icon if we change from svg to png icons.

[TeoAlex]

For the moment i cannot reproduce the error but another option we can test is to set a query arg on the svg url mask: url('../svg/chevron-right-solid.svg?no_cors_please')

https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome