Streaming live at 10am (PST)

Lottie animation bug on Safari and iOS Chrome

Hello, everyone!

I made a Lottie animation in Webflow and exported to HTML. It works properly everywhere but Safari and iOS Chrome. In these browsers it blinks a lot when the user scrolls down (it’s animated on scroll).

What can I do to fix this bug? Did someone face this bug too?

Thanks a lot!
Alex.

Please at share a published link as outlined in this topics posting guideline. A browser struggling with an animation sounds like a local issue. So sharing your test environment specs can help isolate the issue (device, OS version, browser version).

HI!
Here’s the link: http://uisa.com.br
It will open a landing page that shows the animation.

Thanks!

So that animation looks like it wont work on any device that has a smaller viewport than the animation. It loaded on an IPad but not an iPhone.

CloudApp

But it works properly on Android smartphones.

So there you go. You may want to head on over to Webkit and check for bugs / file a report.

Ok. I will try checking there.
Thanks.

I have the same issue on my website, for some reason it seems like the frames aren’t fully loaded and the animation flicker. Once it is fully loaded it’s alright it also happens on one of your showcase here:
http://worlds-thinnest-smartphone.webflow.io
I need to add this for a product launch and can’t take the risk that it won’t look good on all device, can you get in touch with your team?

Thanks

Same here, runs great on chrome even on a slow pc, but using safari on Mac or any browser on iOS flickers the animation. Really tried everything, even reduced the json file to 1 mb just for the testing and dropped the quality a lot, still flickers.

Any advice? did you managed it somehow to work?
You can chack mine here. https://gab-digital-solutions.webflow.io/

I found the solution!

Change the render option to Canvas
image

You’re welcome :slight_smile: