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?