CSS Animation Delay Bug In Safari

Question

I have recently come across some odd behaviour with Safari in regards to CSS animations and a failure to update an elements position when the DOM is manipulated. I have taken some GIFs that illustrate this:

In Chrome (http://recordit.co/cCim1IwyMc), when animation-delay is updated in the DOM, the browser will update the element's animation position as you would expect.

In Safari (http://recordit.co/3DRmEdo0FC), when animation-delay is updated in the DOM, the browser fails to update the element's animation position.

This seems like a reflow/repaint issue to me. I also noticed that when you hover over the animated element in Safari's inspector, the blue overlay also fails to keep up with the animation.

Here is the code: http://codepen.io/jabes/pen/pNgRrg

Answer 1

I recently stumbled across a similar problem regarding safari and css3 animations, it seems safari has issues overwriting single animation properties when defining the animation using the shorthand pattern. In my case it was the animation-play-state, that could not be changed for safari, so i had to apply the whole animation string at once instead of simply setting animation-play-state: running.

try:

.animator {
  width: calc(100% - 100px);
  animation: slide 50s linear 1s forwards; /* animation-delay 1s */
}

The delay goes right after the timing function.