[Resolved] svg icons are not visible on chrome mobile

[Attila]

Hello,

I am facing a very strange issue. I am working on a site for a client. The social icons in the header and the footer are not visible in Chrome mobile browser but in Firefox mobile. On the PC on both browsers everything looks fine.

The issue is strange because I made already a similar website (almost copied everything from the previous) where the social icons are visible on both mobile browsers.

Thank you for your help in advance.

Attila

[David]

Hi there,

i cannot see the icons on Chrome Desktop, you may be seeing them as they’re on your local machine.
In the developers console i see this:

https://www.screencast.com/t/kynAcDuCFdBP

The mixed content warning is complaining about the URLs for your images being served incorrectly over HTTPS …. you need to make sure the image URLs are correct.

[Attila]

Hi David,

thank you for the quick response.
Ok, but I can see them in Firefox and Firefox mobile, how is that possible?

[David]

Chrome is more fussy about mixed content warnings – whereas Firefox and Safari are not.
Its the browser that is blocking those images… Check the URLs of the icon images to make sure they are being served over https

[Attila]

I have checked now, the icons are served over https, am I wrong?

[David]

I can’t say – the issue Chrome is reporting is a HTTPS mixed content issue.
This is either an issue with the SSL certificate or the files were originally uploaded under HTTP …

[Attila]

Ok, I have realized this is not a GP related issue, sorry.. 😉

Anyhow, I found the solution. Chrome is very picky about how the svg file is saved. Here is an explanation for Illustrator. https://www.youtube.com/watch?v=79tI5YaowqE
Maybe it can help others with the same problem.

Thank you for your help!

[David]

Glad to hear you found the issue! And thanks for sharing

[Author]

Posts