Strange flickering in collection-repeat/ng-repeat


#1

I have a list of items which I am setting some classes on dynamically based on the item, and I’m getting this crazy flickering when I try scrolling:

If I look closely, it’s as if some of the items are swapping places as I scroll around. I’ve tried this list with both collection-repeat and plain ng-repeat and I still see it, so it’s not just an issue with collection-repeat’s fast DOM-switching stuff.

Anyone have any ideas what I’m doing wrong?

The view HTML is here: https://gist.github.com/RangerRick/77b3b42ce2e7a94debc8

It’s backed by $scope.alarms which is an array set from a ReST call, and it shouldn’t be re-updating while scrolling around.


#2

More info: I’ve tried removing the pull-to-refresh and infinite scroll stuff to confirm they weren’t related. (They’re not.)

I’ve also tried removing ALL of the stuff related to alarm.severity and then just putting {{alarm.severity}} in text somewhere, and it does not flip back and forth when scrolling.

It appears to only be related to scrolling + css class changes. If I view the DOM while I’m moving it, I see the collection-related stuff flipping around as I’m scrolling between:

style="position: absolute; -webkit-transform: translate3d(0px, 99px, 0px); height: 99px;"

…and:

style="position: absolute; -webkit-transform: translate3d(0px, 495px, 0px); height: 99px;"

OK, I swear I tried this with just regular ng-repeat and still saw it, but I just tried to reproduce it again switching to simple ng-repeat and it’s not flickering. :frowning:

So I stand corrected, it appears to only happen in collection-repeat, not ng-repeat.


#3

Any chance you could put this in a codepen? I see the view code on github but I want to see the CSS classes.


#4

I had the same problem, a transition css property on my items.
Thanks @brandyshea :blush:


#5

Please was anybody able to solve this issue. I am having the exact same problem currently. Help would be appreciated