Safari - ng-animate using ng-class value is not animating on ng-enter

[chrissfa]

Possibly related to recently fixed and closed issue #12376. I am finding ng-animate never works upon ng-enter / ng-enter-active in Safari if relying on a ng-class value. Works fine in other browsers.

For instance, if i use ng-class="my-value" and my-value is set to 'right-to-left', the ng-enter animation will try and trigger (I can see this occurring in element inspector - it sits there for length of animation set in CSS) but no animation is seen in browser. If I manually add 'right-to-left' as a normal class in mark-up, the animation works perfectly.

Noticing that while trying to animate Safari has some extra classes over Chrome, such as: 'right-to-left-add-active', 'enter-active', right-to-left-add.

I will try an provide a JSFiddle over the next few days.

[chrissfa]

Actually, just forked the Plunker that was working from #12376.

http://plnkr.co/edit/40JgZnOHnxxeOKvgvw1F?p=preview

Added myValue='left-ani' to ng-click, and forced css animations to rely on this class. Press next and ng-enter doesn't work first time in Safari, while it will always work in Chrome.

[matsko]

Looking into it.

[olore]

FWIW - the Plunker for both this and #12376 is still problematic for me in Safari 7.1.7, and more importantly my iOS devices and emulators

[raffaelcavaliere]

Does anyone have a solution for that problem ?
ng-enter combined with 3d animations is not reliable on safari (tested on 6,7 and 8) nor iOS safari (tested on 8). Is anybody has a workaround ?

[degamer106]

Heh. Seeing this issue as well but with ng-if. Works OK on Chrome, but not Safari 8 or iOS 9 Safari. Here's some sample code.

.tn-footer-bar.ng-enter,
.tn-footer-bar.ng-leave {
-webkit-transition: 0.3s ease-in-out;
}

.tn-footer-bar.ng-enter,
.tn-footer-bar.ng-leave.ng-leave-active {
-webkit-transform: translate3d(0, 100%, 0);
}

.tn-footer-bar.ng-leave,
.tn-footer-bar.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0);
}

[oliverzy]

Today I have already seen similar issue myself.
I tested on Mac Safari 9.0, it works just fine.
But on IOS Safari 9.0 (iphone 6 or simulator), it doesn't work.

[anishbenji]

I've been having the same issue of inconsistent application of animations in Safari in iOS for some time as well. Tested with iOS 8.x & 9.0.1.

[kazimierasc]

I can confirm that this issue is present in Safari 9.0.1 running on OSX 10.10.5 and Safari 9.0.2 on OSX 10.11.2. The browser seems to completely ignore the enter transition in the older version, whereas the leave transition works as expected. In the newer version the enter transition works sometimes, however it is completely unreliable.

What is also interesting, the animation seems to work fine with version 1.3 of angular (see codepen for version 1.3.14), but fails to work on version 1.4 (see codepen for version 1.4.8) and the 1.5 beta (see codepen for 1.5.0-beta.2).