Flicker on firefox

[OforgeO]

Hello

The animation is working well on chrome Then the flicker happens on firefox When I refresh page, it doesn't show or flicker.... https://www.dropbox.com/s/ryoee324d4098e4/kk%202019-07-30%2004-05-03.avi?dl=0

And I code like as below $(document).ready(function () { var miss_container = document.getElementById('iframe_section');

    bodymovin.setLocationHref(location.href);
    animItem = bodymovin.loadAnimation({
      wrapper: miss_container,
      animType: 'svg',
      loop: false,
      autoplay: false,
      path: root+'assets/js/Miss1/data.json'
    });
    animItem.addEventListener('data_ready',function(){
        animItem.setSubframe(false);    
    });
           .....

};

But after few seconds, it works well.... What's the problem?

[bodymovin]

Hi, can you share the project files?

[anuraggautam77]

Same issue I am facing in My project . On first page load flickering is coming in Firefox and works fine after reloading the page.

[bodymovin]

@anuraggautam77 hi, can you share a link?

[hemakumark]

Hi, Are there are any updates on this fix?

[jeton-th]

I have the same problem, on firefox only, flickering in the first 3-4 seconds.

[bodymovin]

@jeton-th can you share a link with an example of the issue?

[jeton-th]

@jeton-th can you share a link with an example of the issue?

www.agreewe.com

[thaliemuk]

same issue for me

[XR2477]

Same issue here. Any one found solution?

[Flaysh]

Same here.. any solution?

[absoluticecold]

Here is a workaround for the Motion Designers! Offset your png sequence layers in your After effects Project with an extra frame, than there is no flickering. So basically they will overlap. take a look at the attached pic.

hope that makes sense!

Of course the file size gets bigger.

[lukesahula]

Any updates on this? I am also experiencing this issue.

[thevladdo]

The workaround I found was to change the renderer from 'svg' to 'canvas' as shown below:

lottie.loadAnimation({
    container: lottieRef.current,
    renderer: 'canvas',
    loop: true,
    autoplay: true,
    path: pageHero.media[0].url,
    rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice'
    }
});