0

I'm making a Facebook friends picker, with items that contain an avatar and the user's name. While scrolling quickly, elements often appear with a delay.

I realise that my question is similar to this one : iPad Safari scrolling causes HTML elements to disappear and reappear with a delay However, the accepted answer doesn't solve my problem, as it causes my app to crash after scrolling for a while. The scrolling also becomes a lot more laggy.

I don't know the details of how GPU rendering works, but my guess is that each row becomes a texture in the GPU, and after a while it's just too much.

Anything else I can try? There's no relative positioning going on btw. I have about 700 friends, but I can only imagine the problem getting worse as the list becomes longer, because when I deliberately set it to show less items, the problem seems to goe away.

Thanks!

Community
  • 1
  • 1
SwammiM
  • 463
  • 6
  • 15
  • If anyone knows of a way to (slightly) limit the speed of the momentum scrolling, that would probably help a great deal. – SwammiM Feb 24 '14 at 16:06

2 Answers2

0

I'd recommend using the ng-grid function in AngularJS for long lists that need scrolling in HTML apps. Other suggestions would be just to optimise the CSS and make sure there aren't alot of box-shadows, gradients etc that take up alot of processing power when scrolling.

Hope that helps and any questions just let me know!

Kai Feller
  • 653
  • 3
  • 14
  • I tried removing all styles from my items, and while it improved the problem slightly, it was still there. But I'll give ng-grid a try, thanks! – SwammiM Feb 24 '14 at 17:42
  • No worries! If I've helped, accepting as answer would be great :) – Kai Feller Feb 24 '14 at 17:49
  • Off course :) Need to finish some other work first though. Do you happen to know if this component works well with webkit-overflow-scrolling:touch? – SwammiM Feb 24 '14 at 21:28
  • I just downloaded ng-grid, and tested the workbench/index3.html demo on my iphone (as that was the only one with a relatively big data set), and it was very laggy, so this doesn't look too promising. – SwammiM Feb 25 '14 at 10:28
0

Does this solve your problem?

overflow-y: auto;

Add that to the your container.

(Presumably just overflow: auto; would work too depending on your needs.)

David Notik
  • 2,026
  • 15
  • 21