Safari 中的 CSS 动画延迟错误

我最近在 Safari 中遇到了一些与 CSS 动画有关的奇怪行为，并且在操作 DOM 时无法更新元素位置。我拍了一些 GIF 来说明这一点：

在 Chrome 中（http://recordit.co/cCim1IwyMc http://recordit.co/cCim1IwyMc), when animation-delay在 DOM 中更新后，浏览器将按照您的预期更新元素的动画位置。

在 Safari 中 (http://recordit.co/3DRmEdo0FC http://recordit.co/3DRmEdo0FC), when animation-delay在 DOM 中更新时，浏览器无法更新元素的动画位置。

对我来说，这似乎是一个回流/重绘问题。我还注意到，当您将鼠标悬停在 Safari 检查器中的动画元素上时，蓝色叠加层也无法跟上动画。

这是代码：http://codepen.io/jabes/pen/pNgRrg http://codepen.io/jabes/pen/pNgRrg

我最近偶然发现了一个关于 safari 和 css3 动画的类似问题，似乎 safari 在使用速记模式定义动画时存在覆盖单个动画属性的问题。就我而言，它是动画播放状态，对于 Safari 来说无法更改，因此我必须立即应用整个动画字符串，而不是简单地设置动画播放状态：运行。

try:

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

延迟发生在计时功能之后。