ngAnimate randomly fails to apply ng-enter class on Safari browser

[malps13]

Hi there, I'am having problems with ngAnimate on Safari browse randomly corruption animation, more info below.

Overview of the Issue -
I am trying to create carousel slider using CSS translate3d transform, but this bug seems to appear also for other CSS properties. An animation which is working correctly on Chrome & Firefox browsers tends to randomly fail on Safari browser. It seems that for some reason ng-enter class is not being applied every time which brakes the animation. However, at the same time ng-leave seems to be working correctly. Effect looks as below:

Below you will find link to live preview.
Motivation for or Use Case - ngAnimate should behave the same on different browsers or at least not randomly
Angular Version(s) - 1.4
Browsers and Operating System - Safari Browser, I checked on Mac using Safari 8.0.7 (10600.7.12)
Reproduce the Error - Open http://plnkr.co/edit/RmJs3qBdA6saOgZaHJAU?p=preview in Safari browser and keep clicking "Next" button
Related Issues - Resembles a bit problem #12359 but happens only on Safari and not only under pressure.

[JungMinu]

well, why don't you try rendering via hardware support?

[wesleycho]

I'm noticing a different problem in my Safari (8.0.6) on that Plunker - the first click to next fails to do anything, and subsequent clicks stack up the new elements on top of the old one without properly removing the old one.

[malps13]

@codevelop not sure what do you mean, I thought that using translate3d CSS transform actually forces hardware acceleration.

I will be happy to hear any workaround for this issue, but it still doesn't fix the problem itself, right? I am just not sure whether it is Safari to blame or it is some problem with ngAnimate, It would be nice if somebody could look into it.

[shahu-nc]

I'm having the same issue. It's an Angular 1.4 thing because it works perfectly on 1.3

[slin1202]

Any ideas? Having the same issue

[matsko]

Could you guys retry this on 1.4 snapshot? It works fine for me in Safari:
http://plnkr.co/edit/Pl7AMrC4vo3eyC5nf0mt?p=preview

[matsko]

The 1.4 snapshot is the latest build on master. The next release is 1.4.4.

[wesleycho]

Looks fixed for me (8.0.7)

[Narretz]

Thanks @wesleycho. I'm gonna close this then.

[malps13]

Thanks for help guys. However I'm trying out the example provided by @matsko and still having same issue in my Safari (8.0.8). Anyone else experiencing this?

[glenn-allen]

Still happening for me with angular 1.4.7 and various versions of Safari (including 9.0.2), but just posting because I've found explicitly adding "ng-enter" to the HTML template works around this problem, in case anybody comes here looking for a workaround.

E.g. Instead of $animate entering <span class="test">Some text</span> use the following HTML:
<span class="test ng-enter">Some text</span>

[matsko]

Sorry folks that this one is taking so long. Me and @Narretz will have a look at this one tomorrow.

[Millsionaire]

I'm in Safari 8.08 and am still seeing the issue with http://plnkr.co/edit/Pl7AMrC4vo3eyC5nf0mt?p=preview and my own project. Is there an update on this?

[Geono]

I'm experiencing this problem too. Any other updates?

[shirji]

I am also experiencing this using ngAnimateSwap (Angular 1.5). Animation looks good on IE, Firefox, and Chrome, but not on Safari, and appears very much like the issue shown in Millsionaire's plnkr.

[fluky]

+1 this is definitely not fixed

[jpduckwo]

Also having issues with ng-enter not working on Safari (Angular 1.5)

[azaslavsky]

My team is also having problems with this. We are using the ionic framework on top of Angular, so perhaps that is a cause? Either way, it seems like this is definitely not fixed. Chrome and Firefox both work swimmingly, so it is just Safari (happens on iOS Safari 9.3.3 Web View, and desktop Safari 9.0.3)

[lsharir]

Since no one mentioned it yet,

@Narretz said it here :
Using .ng-enter-prepare class to set up the initial style of the animation fixes this issue on safari

like so:

.ng-enter-prepare {
   opacity: 0;
}

[adrienlamotte]

Hi Guys,

I'm using AngularJS (1.6.3), and I have the same kind of problem (on Safari and iOS)... In my case, the "ng-leave" class doesn't seems to be added, and the view is removed directly (so only the "enter" animation is plated). And it's totally random... Sometime it works o_o

Is this supposed to be fixed ?
Any idea ?

Thanks !

[erikbaan]

This is still an issue with angular 1.6.5 and angular-animate 1.6.5 (with ui-router 1.x). Everything works fine with chrome, firefox, but not safari.

[passatgt]

I had the same issue and my problem was that i was using translateX on the ng-enter and ng-leave classes. I replaced it with the left property and this fixed my issue.

Here is the original demo, where i replaced the translateX with left: http://plnkr.co/edit/kMMpcMDITYclHXPfWUGn?p=preview

[deje1011]

@passatgt Thanks, using left works for me too.
I'm having the same issue with translate3d in AngularJS 1.5.11