SVG Lotties rendering blurry in Chrome - transform:translate3d is being applied, but from where?

Here is my read-only site

Hey everyone! Brand new to WebFlow, just playing around with some basics. What a powerful tool!

I uploaded some Lottie .JSON files and put them on my page. The issue is that they render blurry in Chrome, but crisp in Firefox.

When I inspect element in Chrome I see the each Lottie SVG has: {transform:translate3d(0px, 0px, 0px)}

If I delete that CSS they instantly turn sharp. But the weird part is that in WebFlow my Lotties have no classes applied. Straight from the Assets tab to the screen. Not sure what is going on here…

Anyone have a solution? I have been googling for a while with no results. Thanks!

I don’t know what is adding this to the the element upon page rendering, but your lottie anims are showing very crisp on my up to date chrome, mac

I have the same problem, did you had any luck with that?

Had this same problem and fixed it by overriding the styles of the child SVG in your parent lottie animation container.

In my case the class name of the parent was “lottie-hero” so in page custom code insert:

.lottie-hero > svg { 
transform: unset !important; 

Just replace ‘lottie-hero’ with whatever you named your Lottie Container class


I had the same issue. This solved it. Thank you!