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