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:

element.style {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:

<style>
.lottie-hero > svg { 
transform: unset !important; 
} 
</style>

Just replace ā€˜lottie-heroā€™ with whatever you named your Lottie Container class

7 Likes

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

Hey Michael, just a quick update for you, I had to change ā€œunsetā€ to ā€œnoneā€ and it worked great. Also, to those confused, please target the exact class name of your lottie file. I found it not enough to target the parent container. Just trying to clarify for future visitors.