ng-hide and ng-show showing at the same time for a short period of time in IE11

[PhilipWallin]

When including ng-animate there seem to be a brief period of time where a ng-show and ng-hide element are showing at the same time, even if no animations are used.

Example (the problem is only visible if using IE11):
http://plnkr.co/edit/vqVGcf9cjFQPAbq0Igyq?p=preview

In the example you can see the flickering of the two elements showing at the same time when checking and unchecking the checkbox which trigger ng-show/ng-hide.

[Narretz]

This sounds familiar. The problem is that I can never reliably reproduce these in IE11. It has happened maybe once in 30 times for me. I've also seen it once on Firefox, so it maybe has something to do with how fast the browser flushed the requestAnimationFrame queue, or with how long we take to detect if animations are allowed.

[Narretz]

Can you please test with the latest snapshot: http://code.angularjs.org/snapshot/angular-animate.js and see if it happens less often?

[PhilipWallin]

In my IE11 I get the flash of both showing every time I click the checkbox. Using the linked angular-animate didn't seem to change this behavior.

[Narretz]

That's weird. What IE and OS version do you have? And is your computer generally slow or under load?

[PhilipWallin]

We have quite high-end computers (I tried on three of them), my initial guess was actually that it was fast enough to show something which is only visible for a short amount of time. I'm running Windows 8.1 with IE version 11.0.9600.18202. One of the computers I tried it on was Windows 7, showing the same problem.

[PhilipWallin]

I'm currently applying this css to avoid the problem:
.ng-hide.ng-hide-animate {
display: none !important;
}

This could of course cause problems for us in the future if we want to animate some ng-hide and not animate some.

[Narretz]

Hm, I didn't think about the computer being too fast. That could it be it. I also have a slightly newer version of IE11 (11.0.9600.18204), but I doubt that this is the reason.

[PhilipWallin]

I tried this now in IE11 on my virtual Windows 7, and experience the problem maybe once every 2-10 try. This could be because my virtual machine is running slower, but this is only a guess.

[dgieselaar]

I'm having the same problem in Chrome, w/ an ng-switch. The specific case where it happens is when a view value change in ngModel is committed, which a) removes a ng-valid-parse class on the parent form, b) removes a class on the form field (a custom empty class) and b) flips an ng-switch (because the form field is then disabled). It happens because the parent animation (a) task runs first, and the scheduler waits until it is completed, then requests another frame to run the task from the form field (b), then waits another frame to run the ng-switch animation task (c), causing a flicker of one frame where both the elements in the ng-switch are temporarily displayed.

[dgieselaar]

[Narretz]

@Plestik can you post a demo in a plnkr.co or similar?

[dgieselaar]

@Narretz I'll give it a shot. But is this even supposed to work w/ nested animations if it only runs one group of animations every frame?