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

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. — Mr-Kobra, Mar 03 '20 at 11:39

score 6 · Answer 1 · answered Oct 21 '21 at 06:36

6

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

answered Oct 21 '21 at 06:36

Sealey Wang

61
1
3

you saved my day, thanks a lot for the fix – Ana DEV Jan 17 '22 at 15:26
This worked for me as well, thanks! Mine was blurry in Chrome – Håvard Brynjulfsen Mar 09 '22 at 12:37
Perfect. You saved me a lot of time! – kaiserkiwi Mar 31 '22 at 07:15
for me, this also fixed blurry lottie svg in chrome – Wibisono Indrawan Sep 24 '22 at 01:21

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

1 Answers1