Angular ng-style在Safari中不会更新

Question

我使用CSS动画在Angular中构建了一个非常简单的旋转木马，它在Chrome中运行良好，但当我决定在Safari中测试时，我发现点击和拖动功能不起作用。过去几天我一直在努力解决这个问题，希望你能帮忙。

经过一番调查后，我得出的结论是$scope.getAnimatorStyles方法被正确调用，但ng-style="getAnimatorStyles()"没有按预期更新dom。

我试着跟着没有运气。

• 通过调用$scope.$apply()
强制更新范围
• 观看$scope.animationDelay并将样式直接应用于DOM
• 通过调用.offsetHeight
强制浏览器重排
• 更新$scope.animationDelay
内的$timeout

奇怪的是，如果我将样式应用到文档主体，它会使我认为Angular正在为指令做一些奇怪的事情。

这是一个包含滑块代码的codepen：http://codepen.io/jabes/pen/KNpEbq

非常感谢任何帮助。

编辑＃1：

所以我通过强制重排取得了一些进展。在单击并拖动时，我更改了显示属性，但这也会重置动画，因此这不是解决方案。我还采用了一些GIF来说明浏览器无法正常呈现。

这是Chrome（http://recordit.co/fcmIdVntjC），注意动画元素与卡片一起移动的方式，当我更改延迟属性时，它也会随着卡片一起改变位置。

这是Safari（http://recordit.co/V2bwhL877J），注意动画元素在卡片动画时是静态的，当我改变它移动的延迟但卡片不会改变位置时。

编辑＃2：

好的，所以我已经分离了HTML / CSS并删除了所有Angular和JavaScript，问题仍然存在。当在元素的样式属性中更改动画延迟时，Safari不会更新动画位置。

编辑＃3：

这个问题似乎与Angular无关。我创建了另一个帖子来说明Safari中的css动画错误：CSS Animation Delay Bug In Safari

Answer 1

您是否尝试对console.log函数生成并返回的样式对象执行getAnimatorStyles()？也许那里发生了一些你并不期待的事情。

此外，您是否可以将相同的样式对象复制/粘贴回模板定义中，只是为了测试它并查看是否发生了任何不同的事情？

当我完全陷入困境时，我总是仔细检查基础知识，以排除它们。有时，这只是一个我们忽略的基本错误，因为我们正在寻找一个不存在的更难的问题。