javascript - Angular ng-style 不会在 Safari 中更新

Question

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

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

我尝试跟随但没有成功。

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

奇怪的是，如果我将样式应用于文档正文，它会起作用，这让我觉得 Angular 对指令做了一些奇怪的事情。

这是带有 slider 代码的代码笔: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

您是否尝试过对 getAnimatorStyles() 函数生成和返回的样式对象执行 console.log 操作？也许那里发生了一些您没有预料到的事情。

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

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