ng-hide animation flicker with Internet Explorer 11

[ashraffayad]

When using animation with ng-hide, sometimes a flicker takes place at the end of the animation only on IE. Tested on IE11.
http://jsfiddle.net/ashraffayad/7MLLC/

[chazzlabs]

I'm still occasionally seeing a flicker in IE11 but only when using CSS Keyframes.

I modified the above Fiddle to provide an example using both CSS Transitions and Keyframes. I also updated to Angular 1.3.11. I'm seeing that every five or so times I toggle the boxes the Keyframes box will flicker when hiding.

http://plnkr.co/edit/gx11iCX87isSBkPQi3zd?p=preview

[havenchyk]

@ashraffayad @chazzlabs do you still have this issue? Even with angular 1.4?

[chazzlabs]

@havenchyk After changing my previous Plunker to use version 1.4.1 of Angular, I'm only seeing the flicker on the very first toggle of the checkbox in Internet Explorer. I don't see a flicker again after that, but it seems to happen reliably on the first toggle.

[ashraffayad]

@havenchyk I was frustrated with ng-animate. So, I decided to let it go. I add and remove my animation myself.

[havenchyk]

@chazzlabs, honestly I don't see flickering even with 1.3. Could you please add sample video or gif?

With your plnkr I see only same behavior like in Chrome

[chazzlabs]

@havenchyk Captured this from IE11. In the gif I click the checkbox three times. The box actually flickered twice, but I think don't think the gif picked up all of the frames in the animation so you only actually see it happen once.

http://i.imgur.com/o4ZuIqB.gifv

[havenchyk]

@chazzlabs Hmm, I haven't this flickering in IE 11 with your plnkr. I use IE11 version 17843

[chazzlabs]

@havenchyk For what it's worth, I see the issue on IE11 on two different computers.

[FesterCluck]

This has to do with display: none/block causing a repaint while visibility: hidden/visible does not. What you are seeing is the div being redrawn just before it's properties are applied. Since display: none is used (but not block), that's why it's seen in only 1 direction.

When using containers like this, the earnest way to handle it would be to have the inner square animate to visibility:hidden & the outer div animate to display:none. This should both prevent the flicker & have the element removed from the flow.

For reference, this has come up before: #4225

[havenchyk]

@matsko could you please add a comment?

[matsko]

We recently did some fixes regarding this in 1.4.5 and it looks like the flicker is gone for IE11: http://plnkr.co/edit/0zMCpwh0YZAu1YinWaLQ?p=preview.

If this is still a big concern in 1.3 then we can craft up a fix for that.

[Wsiegenthaler]

This still appears to be flickering intermittently for CSS keyframes with IE11 and 1.4.5. Here's a cap of it happening to the plunkr linked above:
http://www.gfycat.com/ChubbyHotHoneybadger

[Narretz]

@Wsiegenthaler How long did you try until the flicker appeared? Or how often does it actually appear? I cannot reproduce this anymore. Maybe it happens only with specific hardware or if the system is under load?

[Wsiegenthaler]

This still occurs for me and usually surfaces every 4-5 attempts. Every once in awhile it can take much longer however. The system is objectively untaxed when the flicker appears. I'm using IE 11.0.9600.

Let me know if there's anything you'd like me to try and I'll report back.

[Narretz]

@Wsiegenthaler I cannot replicate this. I tried about 50 times. I think I have to close this - if the problem was really widespread we would have more complaints.
Can you test with the latest snapshot?

[Wsiegenthaler]

@Narretz I just tried with 1.5.0-rc.1 and I still reliably get the flicker though sometimes you have to patiently click quite awhile. This seems to be one of those issues that affects people but doesn't actually break functionality and so isn't reported as much as it's probably experienced. Nevertheless it does have an impact on the overall quality of the framework, albeit subtle, and for that reason I'd support leaving it open so it eventually gets addressed.

As for the issue itself, I just noticed while click click clicking that adding 'animation-fill-mode: forwards' to the keyframe animation seems to eliminate the issue for me. I can't definitively say this is the culprit but it might be a good lead to explore.