scaled svg very pixelated/blurry in Safari

[Mr-Kobra]

macOS Mojave After Effects 17.0.2 (CC 2020) newest Versions of Chrome/FF/Safari and Lottie/Bodymovin

When scaling a svg-animation in Safari (transform: scale(>1)), it will be rendered extremely pixelated/blurred. In Chrome and Firefox it renders without problems. Is this a known issue and/or is there a known workaround?

[bodymovin]

Hi, can you share a link with an example of this case?

[Mr-Kobra]

Hi,

sure, you can find it here: http://kb.zeitweisen.com/Index.html

Like I said, in FF and Chrome it looks exactly as intended, whereas Safari shows an awful, misplaced animation.

[petertindemans]

Same problem here, it looks great in Chrome. In Safari it shows blurry.

Chrome (version: 79.0.3945.130):

Safari (version: 13.0.5):

[good-idea]

It looks like this is an issue with how Safari (mobile and desktop) deals with CSS scaling and animated SVGs. I just came across this and am now refactoring everything by setting a larger width property and then using translate to scoot it into place :(

[Mr-Kobra]

@good-idea Yes, I ended up doing the same. It's less elegant but at least it works.

[SealeyWang]

I hava the same problem . svg is blurry in Safari .

svg element have transform: translate3d(0px, 0px, 0px);

I cover this style transform: unset !important;

It works for me

[ALICE-YEN]

I have the same problem.

Then I use object tag. It works for both image and animation.

<object type="image/svg+xml" data="/animated.svg">svg-animation</object> <object type="image/svg+xml" data="/image.svg">svg-image</object>

It works but not sure if it's proper. 😀

[midoalone]

I have the same problem.

Then I use object tag. It works for both image and animation.

<object type="image/svg+xml" data="/animated.svg">svg-animation</object> <object type="image/svg+xml" data="/image.svg">svg-image</object>

It works but not sure if it's proper. 😀

This is the only solution worked for me, thanks.

[feeshy]

I have the same problem.

Then I use object tag. It works for both image and animation.

<object type="image/svg+xml" data="/animated.svg">svg-animation</object> <object type="image/svg+xml" data="/image.svg">svg-image</object>

It works but not sure if it's proper. 😀

This solution causes a new issue on some browsers -- When attached a SVG file with mask, the background color is only transparent in light mode, but solid white in dark mode.

Tested on Worked: Safari on iOS 17 Failed: Edge 126 & Firefox 128 on Windows 11, Samsung browser 25 on Android 12