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>
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.
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.
