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.
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. 
So I stand corrected, it appears to only happen in collection-repeat, not ng-repeat.
Any chance you could put this in a codepen? I see the view code on github but I want to see the CSS classes.
I had the same problem, a transition css property on my items.
Thanks @brandyshea 
Please was anybody able to solve this issue. I am having the exact same problem currently. Help would be appreciated