Flickering of Lottie File Asset in Safari

[njho]

Tell us about your environment Mac OS Mojave Version 10.14.6 (18G95)

• Browser and Browser Version: Safari Version 13.0.2 (14608.2.40.1.2) Chrome Version 87.0.4280.141 (Official Build) (x86_64)

• After Effects Version: Version 17.5.1 (Build 47)

What did you do? Please explain the steps you took before you encountered the problem. Designer exported the file and it works well in the Chrome Lottie Previewer but not in the Safari.

What did you expect to happen? Expected to Safari to operate as in chrome

What actually happened? Please include as much relevant detail as possible. As per the attached video. There is flicker in this lottieFile which is not present in Chrome

https://user-images.githubusercontent.com/16584869/104386234-f89fb600-54f1-11eb-98f4-3fe4c9e6f57e.mp4

Please provide a download link to the After Effects file that demonstrates the problem. https://drive.google.com/file/d/1wn-cquFJH6da_ZqOtJUzLB3gO_wZTwXx/view?usp=sharing

[bodymovin]

hi, I don't see the flickering when testing it on that page. What version of OS and Safari are you using?

[ralphjesy12]

I also experience the flickering on Safari. Works fine on chrome. But on Safari animation flickers and positions randomly. Any news about this?

[bodymovin]

@ralphjesy12 hi, can you share a link?

[hrvstr]

I created a very basic demo animation to showcase the issue. https://lottiefiles.com/share/qzpyr9oz

The bug appears in the preview overlay and fullscreen as well as when embedding the actual animation using the provided code snippet.

• macOS Big Sur 11.4 (20F71)
• Safari 14.1.1 (16611.2.7.1.4)
• AE 18.4.0 (Build 41)
• Bodymovin (5.7.13)

[ralphjesy12]

@bodymovin i fixed it by making sure the canvas is the exact ratio of the uploaded animation. When the container doesn't have an explicit width and height, and is different from the original ratio, some elements inside the svg will have problems with positioning and the animation will look buggy on Safari.

const svgData = svg.getLottie();

if(svgData){
  const pt = (svgData.animationData.h / svgData.animationData.w) * 100;
  self.svgSpanner = { 'padding-top': pt + '%' };
}

CSS: like how bootstrap adds the embed responsive

.embed-responsive {
    padding-top: 56.25%; // <-- this is the one you'll have to override using the script above
    height: 0px;
    position: relative;
}

.embed-responsive-item {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

[scendersean]

Hi there I'm having the same issue and I'm having trouble implementing your solution, how do I input your script into mine to make it work? it's a bootstrap site with a .json file I've rendered with bodymovin from after effects. I think I understand your objective but I'm not getting it to work, some sort of user error on my part seems likely.

Mine runs the animation as a loader and then fades out, it works smooth on chrome but it's glitchy and slow on safari.

I

Thanks in advance

   <div  class="anim" id="loader">

    </div>

[scendersean]

*EDIT I think the issue is that I'm not targetting the svg properly to make the change.

        // loader
    var animation = bodymovin.loadAnimation({
        container: document.getElementById('loader'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: ''
    })

    /* Shapes */
    var svgContainer = document.getElementById('loader');
    var animItem = bodymovin.loadAnimation({
    wrapper: svgContainer,
    animType: 'svg',
    loop: true,
    path: 'data.json'
    });

    //loader fadeout
    $(document).ready(function(){
        $('#loader').delay(4000).fadeOut(1000);   
    });
    $(document).ready(function(){

    });   

    $(document).delay(4000).queue(function(){
        // Set background image of a div on click of the button

            var imageUrl = "img/hero.jpg";
            $(".hero").css("background-image", "url(" + imageUrl + ")");
            $('.hero').fadeIn(3000);
    });

[scendersean]

https://620be628757f4d37d2b267cf--laughing-ritchie-bf035b.netlify.app/

here's a preview of it working on chrome but not safari.