Angular.js: ng-animate 1.5.5 - ng-animate-ref - Broken on Safari Desktop and iOS 9.3

[jantimon]

I have set up a very basic plunkr to animate list element between two views with ng-animate 1.5 - ng-animate-ref.

It works for Firefox and Chrome but unfortunately it doesn't for iOS 9.3 and Safari Desktop.

http://plnkr.co/edit/UDX9XlIi3hpYcmJZQ5WD

Direct link to preview:
http://embed.plnkr.co/UDX9XlIi3hpYcmJZQ5WD/

    .row.ng-leave {
        transition: 0.2s linear all;
    }

    .row.ng-anchor-in-add {
        transition: 0.5s linear all;
    }

    <div class="animated row" ng-repeat="i in a track by i" ng-animate-ref="item-{{i}}">{{i}}</div>
    <br> 
    <div class="animated row" ng-repeat="i in b track by i" ng-animate-ref="item-{{i}}">{{i}}</div>
    <a href="javascript:;" ng-click="start()">Start</a>

Behaviour

Expected Behaviour

iOS should also animate the element like in Chrome/Firefox

[gkalpak]

Have you tested on desktop Safari ?

[jantimon]

@gkalpak seems also broken on Safari Desktop (#14650)

[jantimon]

Is there any way I can help to move this forward?
How do you debug errors like this in ng-animate?

[gkalpak]

Is there any way I can help to move this forward?

Identifying the underlying issue and/or submitting a PR work wonders :stuck_out_tongue:
Unfortunately, I don't have access to Safari, so it's difficult to debug errors such like this. The fact that it only happens on Safari is an indication that this is a browser bug though.

Is there a good way to debug errors like this?

Such kind of issues are a real pain to debug. I usually try to slow the animation down and observe the actual DOM trying to identify unexpected behavior. It is also very helpful, if one can reproduce the issue without Angular (using "raw" DOM operations), as it gives a clearer insight on the problematic behavior (be is Angular's or the browser's), but it's usually not trivial to do.

/cc @petebacondarwin, @matsko (<-- our cutting edge Safari-enabled models)

[sebastiendan]

I created this plunkr from ngAnimate documentation and noticed that if you add a breakpoint in some functions and step over one or two execution lines before resuming page load, you'll have the correct anchoring animation in Safari.

https://plnkr.co/edit/1tGxv7TMe9A5zFfzauWZ?p=preview

Try there to add a breakpoint in prepareAnchoredAnimation function (originally part of animateCssDriver.js) at line 1597 of angular-animate.js (when ngAnimate appends the cloned element to body DOM object).
When you start the animation by clicking on one of the elements, you'll face the breakpoint.
If you directly resume page load in Safari debugger, the animation won't work.
If you step over one or two execution lines and then resume process, it will work.

I tried to imitate this breakpoint behaviour by adding a "pause" in the code (not a timeout but a real synchronous pause) but it didn't work.

Also I noticed another issue with Safari: back and forth cache history.
When getting back in history with touchpad (2 fingers from left to right) instead of back arrow button, Safari displays a "book page" translation animation. This results in first displaying the end state of animation and then loading back the animation from start state to end state.
This issue is major I think because it makes the anchoring animation feature totally unusable on Safari.

Anyway I hope this breakpoint clue will help here.
I wish I could do more but it's my first look into Angular's code...