lottie-animated svg very pixelated/blurry in Safari but not Chrome/FF

Question

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 if so, is there a known workaround?

You can find the animation here: http://kb.zeitweisen.com/Index.html

Quinate

I ended up scaling the animation with width/height and then used "transform: translate()" to push it into place. Not the most elegant way but at least it gives me the same result. – Quinate

Answer 1

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

Remount

you saved my day, thanks a lot for the fix – Allene

This worked for me as well, thanks! Mine was blurry in Chrome – Allsopp

Perfect. You saved me a lot of time! – Subscribe

for me, this also fixed blurry lottie svg in chrome – Kirk