Error loading CSS animation in Safari

Question

I recently encountered some odd behavior with Safari regarding CSS animations and the inability to update the position of elements when manipulating the DOM. I took some GIFs that illustrate this:

In Chrome ( http://recordit.co/cCim1IwyMc ), when animation-delayupdated in the DOM, the browser will update the animation position of the element as you expect.

In Safari ( http://recordit.co/3DRmEdo0FC ), when animation-delayupdated in the DOM, the browser does not update the animation position of the element.

This seems like a reflow / repaint problem. I also noticed that when you hover over an animated element in the Safari inspector, the blue overlay also does not cope with the animation.

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

Answer 1

I recently ran into a similar issue regarding safari and css3 animations. Safari seems to have problems rewriting single animation properties when defining animations using an abbreviated template. In my case, it was an animation state that could not be changed for safari, so I had to apply the entire animation line at the same time, and not just set the animation mode: running.

to try:

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

The delay goes immediately after the synchronization function.