Angular ng-style does not update in Safari

Question

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.

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.

I've tried to following with no luck.

• 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

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.

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

Any help is very much appreciated.

Edit #1:

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.

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.

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.

Edit #2:

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.

Edit #3:

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

Answer 1

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.