I created a simple carousel using Angular and CSS animations which works well in Chrome. However, I recently tested it in Safari and noticed that the click and drag functionality does not work. I've been trying to fix this issue for days and could use some assistance.
Upon investigation, it seems that the $scope.getAnimatorStyles method is being called correctly, but the
ng-style="getAnimatorStyles()"I've attempted various solutions without success:
- Forcing a scope update by using
$scope.$apply() - Watching
$scope.animationDelayand applying styles directly to the DOM - Triggering a browser reflow by calling
.offsetHeight - Updating
$scope.animationDelaywithin$timeout
An interesting observation is that when I apply the styles to the document body, it functions properly, leading me to suspect that Angular might be causing some issues with the directive.
Here's the codepen link showcasing the slider: http://codepen.io/jabes/pen/KNpEbq
Any help or insights would be greatly appreciated.
Edit #1:
I made progress by forcing a reflow - changing the display property on click and drag somewhat resolves the issue. However, this also resets the animation, rendering it ineffective. I've captured GIFs illustrating the improper rendering in the browser.
Check out the Chrome recording () showing how the animator element moves with the cards and updates position based on delay changes.
Compare it with the Safari recording (), where the animator remains static while the cards animate, and only responds to delay changes without affecting card positions.
Edit #2:
Even after removing all Angular and JavaScript from the HTML/CSS, Safari still fails to update the animation position when changing the animation-delay in the element's style property.
Edit #3:
This issue appears to have no connection to Angular. I've posted about a related CSS animation bug in Safari: CSS Animation Delay Bug In Safari