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 对指令做了一些奇怪的事情。

这是一个带有滑块代码的代码笔：http://codepen.io/jabes/pen/KNpEbq

非常感谢任何帮助。

编辑#1：

所以我通过强制回流取得了一些进展。单击并拖动时，我更改了显示属性，该属性在某种程度上起作用，但这也会重置动画，因此这不是解决方案。我还拍摄了几个 GIF 来说明浏览器如何无法正确呈现。

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

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

编辑#2：

好的，所以我已经隔离了 HTML/CSS 并删除了所有 Angular 和 JavaScript，但问题仍然存在。当元素的 style 属性中的 animation-delay 发生变化时，Safari 不会更新动画位置。

编辑#3：

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

Answer 1

您是否尝试过对getAnimatorStyles() 函数正在生成和返回的样式对象执行console.log？也许那里发生了一些你意想不到的事情。

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

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