react-lottie
react-lottie copied to clipboard
Whole component flashes/glitches after 5 seconds
I am getting this weird issue where my whole component which I am animating is glitching or flashing after 5 seconds. Here are my default options:
const defaultOptions = {
loop: true,
autoplay: true,
animationData,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice',
},
};
and here's my react-lottie
component:
<Lottie
options={defaultOptions}
height={400}
width={400}
isClickToPauseDisabled
/>
I'm also seeing this issue but only in Safari. Chrome and Firefox appear to be fine.
It looks like it's actually problem with the underlying lottie-web library. If I remove react-lottie and write a basic wrapper for lottie-web myself then I end up with the same flicker in Safari.