Angular ng-style在Safari中不会更新 [英] Angular ng-style does not update in Safari

问题描述

我已经使用CSS动画在Angular中构建了一个非常简单的轮播，并且在Chrome中效果很好，但是当我决定在Safari中进行测试时，我注意到点击和拖动功能无法正常工作。过去几天，我一直在为此苦苦挣扎，希望您能提供帮助。

I've built a pretty simple carousel in Angular using CSS animations and it works great in Chrome, but when I decided to test in Safari I noticed the click and drag functionality does not work. I've been struggling with this for the past few days and I hope you can help.

经过一番调查，我得出的结论是 $ scope.getAnimatorStyles 方法已正确调用，但 ng-style = getAnimatorStyles（） 并未按预期更新dom 。

After some investigation, I've come to the conclusion that the $scope.getAnimatorStyles method is being properly invoked but the ng-style="getAnimatorStyles()" is not updating the dom as expected.

我试过没有运气。

• 强制a通过调用 $ scope。$ apply（）


• 观看 $ scope.animationDelay 并将样式直接应用于DOM


• 通过调用 .offsetHeight
$ b强制浏览器重排$ b
• 更新 $ scope.animationDelay 到 $ timeout

• Force a scope update by calling $scope.$apply()
• Watch $scope.animationDelay and apply the styles directly to the DOM
• Force the browser to reflow by calling .offsetHeight
• Update $scope.animationDelay inside $timeout

奇怪的是，如果我将样式应用于文档主体，这会使我认为Angular在对该指令进行怪异的操作。

The odd thing is that if I apply the styles to the document body it works which makes me think that Angular is doing something weird to the directive.

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

Here is a codepen with the slider code: http://codepen.io/jabes/pen/KNpEbq

我们非常感谢您的帮助。

Any help is very much appreciated.

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

So I've made some progress by forcing a reflow. On click and drag I change the display property which works somewhat, but this also resets the animation so this is not a solution. I've also taken a couple GIFs to illustrate how the browser is not rendering properly.

这里是Chrome浏览器（ http://recordit.co/fcmIdVntjC ），请注意动画元素如何与卡一起移动，当我更改delay属性时，它也会随卡一起改变位置。

Here is Chrome (http://recordit.co/fcmIdVntjC), notice how the animator element is moving along with the cards and when I change the delay property it also changes position along with the cards.

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

Here is Safari (http://recordit.co/V2bwhL877J), notice how the animator element is static while the cards animate and when I change the delay it moves but the cards do not change position.

好的，所以我隔离了HTML / CSS并剥离了所有Angular和JavaScript，问题仍然存在。在元素的style属性中更改动画延迟时，Safari不会更新动画位置。

Okay so I've isolated the HTML/CSS and stripped out all Angular and JavaScript and the problem still persists. Safari does not update the animation position when animation-delay is changed in the element's style property.

此问题似乎与Angular完全无关。我创建了另一篇文章来说明Safari中的CSS动画错误： Safari中的CSS动画延迟错误

This issue seems unrelated to Angular altogether. I have created another post that illustrates a css animation bug in Safari: CSS Animation Delay Bug In Safari

推荐答案

您是否尝试过执行 console.log getAnimatorStyles（）函数正在生成并返回的样式对象上？

Have you tried doing a console.log on the style object that is being generated and returned by the getAnimatorStyles() function? Perhaps there's something happening there that you're not expecting.

此外，您是否可以将同一样式对象复制/粘贴回模板定义中，以进行测试并查看如果发生什么不同？

Also, can you copy/paste that same style object back into the template definition, just to test it and see if anything different happens?

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

When I'm totally stuck, I always double-check the basics just to rule them out. Sometimes, it is just a basic error that we overlook because we're looking for a more difficult problem which doesn't exist.

这篇关于Angular ng-style在Safari中不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！