CSS animation problem in Safari

Hello,
I have a CSS animation with a delay, and I pause it during the delay. It works as expected on Firefox and Chrome. But on Safari, the animation jumps to the last frame.
Is it a Safari bug and how to work around it?

<html>
  <style>
    #animation {
      animation: test 2s linear 2s;
    }
    @keyframes test {
      to {
        transform: translateY(200px);
      }
    }
  </style>
  <script>
    function test () {
      // var timeout = 3000;
      var timeout = 1000;
      setTimeout (function () {
        document.getElementById ('animation').style.animationPlayState = 'paused';
      }, timeout);
    }
  </script>
  <body onload="test ();">
    <div id="animation">
      Hello
    </div>
  </body>
</html>

On this page an answer is given by Kyle:

Answer given:

This is due to a bug in Safari 5.1 (maybe higher as well.) that the program is trying to access a part of protected memory that it should not be and Windows stops the process before it makes any major problems. A whole lot of bug reports have been submitted to Apple, but there is no word of a fix yet.

You can try repairing the install of Safari, but it’s anyone’s guess as to whether it will work or not and of course, other users on your page will have to go through these steps which is a lot to ask them.

Windows + R -> appwiz.cpl -> Right click Safari -> Repair.

Hope some of that helps.

This was an old bug and I don’t think it’s related with my problem. I use the latest Safari.

What version of Safari are you using and on what platform? If PC, it might be worth realizing that Apple has not supported Safari for the PC in years. You shouldn’t be wasting your time trying to support it.

2 Likes

Hi Rork welcome to the forum

To be clear, this is a problem with Safari on Windows?

If so, I don’t think there is much hope or use in trying to solve the problem by changing your code.

Safari and Windows have been incompatible for so long now I’ve forgotten when Safari stopped having a Windows version.

EDIT
ninja’d :martial_arts_uniform:

No it’s not on Windows.
I tried on macOS and iOS, same bug.

Maybe Safari needs the webkit prefix for the CSS ?

http://caniuse.com/#feat=web-animation

1 Like

I tried with webkit prefix everywhere but the bug is still there.

I just noticed

 <body onload="test ();">

I’m not a fan of having onload in the body tag, but regardless, should the space be there after the function name?

This is just a test snippet.
Space before parenthesis is my personal formatting preference. Hopefully this won’t change the semantic.

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