Streaming live at 10am (PST)

Blurry SVG element in Safari

Hi,

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.

Safari:

Chrome:

Live staging site: https://arbejd-dot-com.webflow.io/

Thank you.


Here is my site Read-Only: LINK

It’s not really a blur, it’s heavily pixellated.

@OvertonGraphics had this issue: 3D transform bug in safari pixellating everything - fine in chrome/FF :(

@OvertonGraphics did you manage to find a way to fix this?

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.

1 Like

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.

Hey. Any guidance on the issue, even if it’s not a Webflow bug?

The cloneable is also a range of divs like you see here: http://b3.ms/KkdA3xzRyn3J

So recreating the look in Photoshop would be starting from scratch

@EmilVillumsen,

Am not sure on this. @rileyrichter, @rileyj_s, @johnramos, @Brando, @cyberdave, @vincent, @webdev, would you guys have any insight to this issue with Safari and 3D images?

I think this code snippet did a abit, but it didn’t fix the blur completely anyway, so still very interested in solutions.

<style>

.mobile-phone.bottom-up{
filter: none;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-ms-filter: blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=‘0’);
}

Pointers that might be relevant:

backface-visibility: hidden;

transform: translateZ(0);

-webkit-font-smoothing: subpixel-antialiased;

transform: scale3D instead of Scale

It’s weird though, scaling above 1 is pretty common as far as I know, and it’s readily available in Webflow

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.

Hey,

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.

Hi @EmilVillumsen,

Sorry for the delayed response, on holiday break.

As for your issue, I am not entirely sure. Hope you can find support with someone else. Have you tried reaching out to customer support directly?

Or at the very least done research on why Safari’s code is interfering with your style?

Hi, @EmilVillumsen!

Ben here with the Webflow Customer Support Team!

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! :webflow_heart:

Hi Ben,

Any update on this? I am puzzled by how it’s the image inside the element that’s most affected by the pixelation.

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.