Collection-repeat rendering problem


#1

We were showing a list inside a modal using ng-repeat and we have changed to collection-repeat for better performance when the list gets big.

The problem is that we have noticed some rendering problems with the bottom border(1px) of the items. Some of the items don’t show the bottom-border and some other show a very thin one that blinks when we scroll.

I wonder if the css translate3d function used by the collection-repeat directive cause this weird effect.

Has anyone noticed similar problems with collection repeat?

Thanks!

P.S: Tested in an android 5.0.1 device and Ionic 1.0.0


#2

I think you might want to check the height of the items declared in the ‘collection-repeat’ element. Check the docs here: http://ionicframework.com/docs/api/directive/collectionRepeat/

I had a similar issue once and setting the height to a few pixels greater than my elements fixed it.


#3

Thanks for the response @bradmartin.

We were applying the border to the item itself and the problem persisted after using the item-height parameter.

We have solved the problem applying the bottom border to a inner div. This way the bottom-borders are rendered correctly.


#4

ähh i think collection-repeat does not take ngStyle stuff!