Scrolling is choppy on my phone


#1

I have a scrolling list in my mobile app which I build using ionic 1.0.1. The list is quite choppy when scrolling. The text blurs a little when scrolling. I checked Facebook’s app on my phone and it scrolls very nicely, no chopping and blur. I have created a code pen and was wondering if there is anything I can do to improve the performance of this:


#2

try to use native scrolling instead of jsscrolling
add overflow-scroll=“true” to the ion-content
or check how many items you have in average and use ng-repeat instead of collection-repeat.
But with many card (images, complex dom-structures) entries your memory usage will grow and your app performance will go down.

So you have to find the balance.

List performance is the only part in hybrid apps (special ionic apps) that shows that this is not native.
They did a great job with collection-repeat and jsScrolling… but there is potential for more ;).


#3

I am new to ionic, but doesn’t my code already turn off jsscrolling with the line:
if (!ionic.Platform.isIOS()) $ionicConfigProvider.scrolling.jsScrolling(false);
?


#4

you can disable js-scrolling directly: $ionicConfigProvider.platform.android.scrolling.jsScrolling(false);

i think only ion-content containers are affected by this config.
If you have ion-scroll-containers you need to set the overflow-scroll=“true” property on your own.