Join the Webstudio community

Updated 3 months ago

SVG not Rendering in iOS Safari

At a glance

The community member is experiencing an issue where SVG logos embedded on their websites are not rendering/displaying on iPhone, while they work fine on other browsers like Brave and Microsoft Edge. The community member has provided live site links and build links to demonstrate the issue. The comments suggest that the issue may be related to CSS and responsive design, as the footer SVG disappears and reappears when resizing the screen, and the header SVG disappears on Safari. One community member suggests trying to clear the cache in Safari, which may explain the difference between browsers.

Useful resources
Hello Colleagues

Something random is happening where SVG Script logos that embed on my sites are not rendering/displaying on iphone . They work fine on Brave Browser and Microsft Edge . SVG code was made with Inkscape . Here is one live site https://aycefinance.co.za/ .Then here is the build https://p-35e31be6-39a6-497c-9e50-f01b164210ce.apps.webstudio.is/?authToken=137e2ba7-7fc0-4bd2-af3a-d46efa05dcfa&mode=preview. What's funny is the exact same code is rendering on the footer and my company logo renders on the developed by ... part of the footer

Its also doing same on https://thataso-holdings.wstd.io/ where the logo isn't rending on footer or nav on safari bowers . The build https://p-642ec93e-1b6e-4b01-8edd-20514f36bc97.apps.webstudio.is/?authToken=68b6ad42-1fcf-4331-b60f-5c1f6980309e&mode=preview

Please assist
Attachments
AYce_2.jpg
Thataso.jpg
image.png
AYce_1.jpg
image.png
L
L
6 comments
I'm guessing it's something to do with css and responsive design (scaling for different screens)

I noticed here that I can make the footer svg disappear and reappear when resizing. Weirdly, I always saw the header one though
Looks like the 680 breakpoint doesn't show the footer svg, while the other ones do.
Still don't know why the header one disappears on safari though
On the footer I had one that was a stacked logo posted of the horizontal one for smaller breakpoints and I was managing it with display none .

Thought the “duplicate” was causing problems
Oh hold on. Try clearing your cache in Safari.
That would explain the difference between browsers
Add a reply
Sign up and join the conversation on Discord