My SVG iPhone element looks blurry in Safari but not in Chrome. I believe this problem has come up within the last few days, don’t recall it being blurry on Safari before. It’s to the extend where the element is useless. And the site is live so please help ASAP.
It has a scale of 4 and is animated. I read similar forum posts but haven’t found a solution.
As for now you’re using a CSS 3D transform for that phone and content but you’re not animatiing it at all, I suggest you design it that way in AI or PS or any other software and that you import it as a flat PNGwith the titled effect baked on.
Creating it as a PNG is possible, but I got the phone from a cloneable Webflow project, so don’t have access to recreating it as of now.
I am puzzled by how it works perfectly fine in Chrome but not in Safari, that must be fixeable with CSS. Do you have any pointers on this? I believe it worked fine in Webflow a few weeks ago.
Hi @EmilVillumsen, sounds like it is a Safari issue not a Webflow issue. As for the clonable project you can go into the assets manager and open up the image and then save image.
What I noticed is i’d get blurry svg if I imported them at a small size and scaled them bigger than original. I know it shouldnt matter…its svg right! Anyhow my work around was to export the .svg from illustrator at a size bigger than what I was going to use. Worth a try.
Hey thanks for tipping in. On my issue there’s an element with an image background and that’s the one that blurs a lot. I’ll try it out for the SVG elements though, thanks.
I haven’t been able to solve this. Am I waiting in vain for help or can I expect guidance? I do believe it’s Webflow relevant as all I did was simply use the Scale transform in the UI, but the code it outputs is not working in Safari.
SVGs can be very tricky and although Webflow and Safari both support them they aren’t without issue. As noted earlier in this post, you can see there are issues with transforms on SVG’s in Safari. I also noticed that there are quite a few bugs related to SVG’s for Safari.
I’m doing some more investigating to see if this is an issue with Webflow or an issue with webkit itself. As soon as I know more I’ll report back!
I didn’t solve the scaling issue per se, but after a couple more hours I found a solution for my case:
I changed the pixel dimensions for every setting set to pixels (so % and scale dimensions stay put but -7px became -31px and so forth). The image inside now also scales properly for some reason.