Scroll Lottie animation clipping on Safari

Community resources Bugs
1

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 : lottie clipping

Thanks for your help !

Here is my site Read-Only: LINK

2

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

3

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

4

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.

5

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!

6

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

7

Similar topic here to continue discussion Lottie animation bug on Safari and iOS Chrome - #14 by vincent

8

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