Ion-scroll (ion-content) performance issue

[zelphir]

• Related github ticket
• Related forum post

I'm building an app with an ion-content that contains a list of images (something like Instagram), of course to have the sharp images I have to scale them (but this is not the issue as @adamdbradley reported on github).

In the ion-content I'm using collection-repeat, infinite-scroll and ion-refresher.

On iphone 5 the scroll is almost good, on iphone 4 a bit laggy. On Android (top gamma, HTC one M8, etc.. ) is a disaster.

@adamdbradley I think this is more of an Android issue than it is Ionic. Having ten 800x800 images all be scaled down by the browser dynamically is a huge burden on the GPU. That's great iOS handles it fine, but the bottle neck is the image size and them being downsized by the browser

Well it's not Android, but is the ionic scroll that has problems. As I wrote on github:

It's definitely not an image scaling problem... I've tried to use the ion-content with overflow-scroll="true" (disabling of course infinite-scroll, pull to refresh and collection-repeat) and instead of using 640x640px images I've used 1024x1024px images and scroll it's perfect, maybe too fast! (Instead of collection-repeat I've switched back to ng-repeat).

How do yo think to address the issue? Is there something that I can do to improve the virtual scroll performance?

Thanks

[perrygovier]

Hey @zelphir, I'm not sure how this is a separate issue from #1322. Scrolling performance is something we're actively working on improving.

It's an issue even on native. They fix it by reusing list elements, having them jump from the top to the bottom once they're offscreen and swapping out their contents. That's similar to the approach we're trying now.

This seems like a duplicate though, lets keep the conversation in one place.

[OlivierCo]

Why not just copying what has done Famo.us with matrix 3D? the scroll is simply perfect.