ngAnimate (v1.2.0rc1) : ngRepeat shows stale items

[damrbaby]

When updating an array that is used for an ngRepeat, the list will momentarily show what appears to be the previous items together with the new items before updating with the new items. This only happens when ngAnimate is a dependency for the app.

Please see http://plnkr.co/edit/fqrI0w1j0HqtV3CTzsFI?p=preview

When you click on the different lists in the above example, you will see how it momentarily shows a combination of the previous and current lists before showing the current one.

Watch carefully, it happens very fast!

This buggy behavior will not occur when you remove ngAnimate.

This bug is serious because it makes ngAnimate virtually unusable for apps that use ngRepeat due to the flashing.

[damrbaby]

After further investigation, I have found that the following lines of code are the culprit:

https://github.com/angular/angular.js/blob/master/src/ngAnimate/animate.js#L552
https://github.com/angular/angular.js/blob/master/src/ngAnimate/animate.js#L619

Basically if you remove $timeout from these lines, and just call the functions, the buggy behavior stops.

I think it comes down to ngAnimate is triggering an extra $digest via $timeout even when there is no CSS animation defined on a particular element.

[matsko]

Hey @damrbaby, the 1st $timeout is necessary so that the browser has a change to redraw the page and apply the styles. When we add the class onto the element then it can sniff the transition/keyframe durations and delays from the element. The 2nd one is absolutely required so that it can capture the animation in between.

Here are my proposed solutions:

1. Change the 1st timeout duration to 0ms (it looks like with 1.2 it doesn't need to have a 1ms delay anymore to trigger the redraw of the page)
2. Change the 2nd timeout such that if the duration is 0 then no timeout is called (maybe this will prevent the animation from occurring).

Can you possibly try setting the 1ms value to 0 with your code and see if that changes anything?

[damrbaby]

@matsko Unfortunately both of your suggestions didn't work. I tried changing the first $timeout for startAnimation to 0ms instead of 1ms, and that doesn't solve the issue (see this plunkr). I'm assuming this is because a $timeout of 0 still is triggering an extra $digest outside of the current execution context.

I also tried the above change in addition to just calling the done() callback without wrapping it in $timeout, with no luck (see this plunkr)

The only solution is to change both of those lines to not use a $timeout at all. See this plunkr which results in the expected behavior. But that won't work if I did add CSS animations to the elements in question.

[matsko]

@damrbaby turns out that both $timeout calls are required, but not to worry, changing them around seems to have helped. Can you take a look at the link and verify if it has the flicker/stale items bug that you mentioned? Here's the link: https://s3.amazonaws.com/angularjs-dev/reflow-bug/example/animate.html

[damrbaby]

@matsko the issue remains. If you change the .items class in your example to display: inline-block the flickering will be apparent there as well (in Chrome at least). It appears that the flickering is only apparent when elements are adjacent to each other either by using inline-block or floats.

[deakster]

Just to add, I am noticing flickering issues absolutely everywhere in my apps which I started to port.

As well as in situations with inline-block and floated adjacent elements, I am also experiencing similar issues in many other contexts.

For example with elements which are absolute positioned, where their position is derived based on dynamic CSS classes (set using ngClass). Whenever the classes on the element change, it appears that momentarily the element resets it's position to 0,0 before adjusting to their correct position. It behaves as if there is a split second when it has no classes, even though that is not the case.

[matsko]

@damrbaby the code is changed again, please try again (do a hard refresh since it's the same URL).
https://s3.amazonaws.com/angularjs-dev/reflow-bug/example/animate.html

And I copied your own demo to use the updated code:
https://s3.amazonaws.com/angularjs-dev/reflow-bug/example/animate2.html

The non-animated code should not touch any $timeout operation now.

[damrbaby]

Hey @matsko, I can confirm that the flickering issue is solved for non-animations using the above code! Thanks!

[matsko]

You have no idea how happy I am to hear that @damrbaby!

[damrbaby]

Yay! I don't want to ruin the party @matsko, but it appears that there is still a slight performance hit with an ngRepeat that has 100+ items with filters in each item (in my case). Off the cuff I'd say it's taking 30-50% longer to render the list when ngAnimate is a dependency. I actually momentarily see handlebars in chrome's web inspector with ngAnimate when I reassign a new array to ngRepeat, which I don't see when I remove ngAnimate. It's as if just having ngAnimate as a dependency for non-animated items is still causing some additional processing to take place.

[matsko]

@damrbaby we can focus on performance issues with ngRepeat + ngAnimate once this is merged into master.