0

I have a website on which I'm showing a loading animation during page load using SVG and CSS3 animations. It works fine on Chrome and Firefox, but behaves incorrectly during page load on Safari 12.1.2

Until the page is fully loaded and the animation is over, the CSS animation won't have the correct duration, but instead will skip from one keyframe to the other without any transition. Once the page is loaded, the animations will start transitioning correctly between keyframes.

Here is a screencast of the issue: https://streamable.com/shca4

This is the CSS code I'm using for the animations. I use autoprefixer for browser support, but the issue is happening with safari 12.1.2 which should not be using a vendor prefix anyway.

#rightHand{
    animation: rightHand 1s infinite 0s ease-in-out;
}

#leftHand{
    animation: leftHand 1s infinite 0s ease-in-out;
}

@keyframes rightHand {
        0%{
            transform: translateX(0%) translateY(0%);
            }
        50%{
            transform: translateX(5%) translateY(5%);
            }
        100%{
            transform: translateX(0%) translateY(0%);
            }
}

@keyframes leftHand {
        0%{
            transform: translateX(0%) translateY(0%);
            }
        50%{
            transform: translateX(-5%) translateY(-5%);
            }
        100%{
            transform: translateX(0%) translateY(0%);
            }
}

Not sure if relevant, but I'm using the following code to add some body classes once the page is loaded to hide the animation:

$(window).on('load', function(){
    $('body').removeClass('is-loading');
    $('body').addClass('dom-loaded');
});

There are no errors in the console. Any idea why this is happening?

Dominic Huysmans
  • 123
  • 4
  • Kindly Check the cross browsers compatibility here: https://stackoverflow.com/questions/20617601/cross-browser-css3-keyframe-animation-firefox. I hope it will help you – Gamers Agenda Sep 03 '19 at 16:20
  • Thanks, @GamersAgenda. I did indeed verify and Safari 12 supports both CSS animations and transitions without any vendor prefixes, but the final CSS has -webkit- anyway for older browsers. Plus, the animation starts to work once the page is loaded so I don't think this issue is related. – Dominic Huysmans Sep 03 '19 at 16:37

0 Answers0