Flickering with ngAnimate and ngShow

[trs79]

Please take a look at this jsfiddle: http://jsfiddle.net/1op08u1o/4/ in IE 11. If you click on link 2, then quickly click on link 1 sometimes you can see a flicker where the orange block is bumped down by the green box before the orange block disappears.

This only seems to happen in IE11, and only if I include the ngAnimate module. Even without css transitions and just showing or hiding there is still a flicker. It may take a few tries to see the flicker happen. I'm using angular 1.3.3

[vitaly-t]

+1

Don't laugh, but this one was the final stroke after which I downgraded 1.3.3 to 1.2.27. I saw this issue described here in my own UI constantly, and it's irritating. It doesn't happen in 1.2.27, so much for 1.3 production readiness...it's just not there yet.

[trs79]

Thanks for the info, looks like it's downgrade time for me. I noticed in mobile Safari there was a flickering issue with another app I'm working on so I don't think the problem is exclusive to IE

[ashraffayad]

+1 same issue with me using angular 1.3.3 and 1.3.4

[vitaly-t]

In 1.3.8 it still there: http://jsfiddle.net/1op08u1o/6/

This is bizarre that animation module is barely usable under IE 10-11, and we do not even have a target date for the fix. One would think this should be a P1 bug, but I guess not. In the meantime, I just have to stay with my downgrade, 1.2.28, hoping that 1.3 gets more traction, and issues as such are taken more seriously.

[CToner3223]

+1

I'm seeing this as well, its very frustrating. I found that replacing the offending ng-shows with ng-ifs fixes the issue but this isn't a very nice fix at all. In the end I've decided to removed NgAnimate from the application all together to fix the flickering but its a less that desirable solution.

[ian-autotrader]

+1

as a fix we tried adding 'ngAnimate' to a sub module i.e.

App = angular.module('App', [ 'Search' ]..

.module('Search' ,[ 'ngAnimate' ]...

the hope was that we could add the animations to specific modules that don't use ng-show,
but it seems that its applied to everything and ignores the module structure should this be the case?

[ian-autotrader]

just as a side note @VitalyTomilov

we added a .ng-hide-add with 0ms which seems to fix your fiddle..?

http://jsfiddle.net/wkse7bgy/

[vitaly-t]

we added a .ng-hide-add with 0ms which seems to fix your fiddle..?

That does it for the example. In general - I don't know, but there is a good chance that yes. This however would go against angular approach of having to code differently for one browser. It will suffice to say that the issue doesn't exist in 1.2 to know that it is simply a bug somewhere in 1.3 that needs to be found and fixed, or maybe removing some of the older IE workarounds introduced the issue.

[vitaly-t]

Guys, the solution is only a work-around, it is not a proper fix!

Why was this issue closed???

[chinchang]

+1 Facing same issue with 1.2.28

[Narretz]

It's a very irritating issue, that also affects Firefox in 1.4.8. I assume that the overall implementation of ngAnimate has become slower rather than faster to handle edge cases.

One thing that is good to know is that due to the way animations are detected, ngAnimate handles "mirror" animations best, that means when both add/remove are animated. That's why adding style such as

.ng-hide-add {
  transition: all 0s ease;
  opacity: 0;
}

helps with this issue.
That said, whenever you have very fast user interaction, it's always possible that the browser cannot keep up with animation updates.

[Narretz]

THis issue is actually not browser specific, and it affects all animations that have a transition / animation on add / enter but not on remove / leave (or vice versa). When you change very fast between the two states, the following is happening:

• addClass animation with animation styles runs
• removeClass animation without styles runs
• addClass animation with animation styles runs -> at this point, the animation is somehow messed up, and it doesn't actually animate, because somehow the removeClass non-animation has interfered with the next addClass animation

So the workaround in #10156 (comment) works, but I wonder if we can do better than that .

[matsko]

This guy should fix it: #13814