Streaming live at 10am (PST)

Scroll Lottie animation clipping on Safari

Hi everyone,

I’m using a page scroll Lottie animation that works great on chrome, but not on Safari :
The first page scroll makes the animation clipping at every frame. But after a full scroll it works fine again.
I call it the epileptic effect :laughing:

Here is a video of the bug : https://streamable.com/71hor9

Thanks for your help !


Here is my site Read-Only: LINK

Try to turn the rendering to Canvas in the settings panel.

Works like a charm, thank you Vincent !
Is this because SVG has less support from Safari?

I don’t know really. There’s not much adoption for Lottie so when it bugs you’re a bit left alone. I think this is a Safari bug anyway.

Ok understood.
There is a little problem now : The Canvas mode is not responsive. I mean it works when the page loads, but if you resize the page the responsiveness of the animation is lost.

I have put the black version in canvas, and let the other color in SVG mode to compare.

Is there a solution to this ?
Thanks!

Apparently, the problem is not linked to Safari but to Apple itself. Same bug on chrome IOS and chrome on Mac OS unfortunately :frowning:

Similar topic here to continue discussion Lottie animation bug on Safari and iOS Chrome

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.