Slow / lagging rendering of list items on iOS devices only [video]


#1

I am having an issue with significant lag for the rendering of items in a list. See video:

I have tested on sim and real iOS devices, and it happens in both cases. Running on android devices works buttery smooth. I am a bit at a loss as to how I should correct it. By trial and error I have found that the cause may be the use of display: flex; in the css. I am not sure how to achieve the layout I have created without using this however. It is also interesting that on android devices it works flawlessly. in iOS however, it seems that the content isn’t rendered until the list view completely finishes scrolling.

Any ideas?


#2

Panic over! Turns out flex wasn’t an issue at all. The little blue element on the left of each card had a z-index: -1, that I had left in from testing. Upon removing the attribute the list works perfectly!

Strange, but happy it works!

Feel free to close the thread. Thanks.