Improve Ionic's Performance in Android With Native Scrolls

Does your Ionic app feel sluggish on scrolls in Android? Well, there's a way to cure that. Ionic has introduced native scrolls in its latest release. In short: native scroll disables Ionic's JS scrolling and releases CPU by handing over the scrolling task to the OS ie Android. As a result, scrolls are smooth as they're in a standalone browser.

Of course, there are some caveats:

  • native scrolls won't work with collection-repeat;
  • scroll bar will disappear but can be added via CSS;
  • iOS has a sluggish support of native scrolls.

To enable native scrolls you can either:

a) Add overflow-scroll=true to the content tag. This is a bit tedious approach and will get enabled for every platform (remember about iOS behavious).

b) As a second approach, we can enable native scrolls for Android only devices and do it in one place, in the app's main file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
  1. // file: app.js
  2. ...
  3. .config(function ($ionicConfigProvider) {
  4. // Enable native scrolls for Android platform only,
  5. // as you see, we're disabling jsScrolling to achieve this.
  6. if (ionic.Platform.isAndroid()) {
  7. $ionicConfigProvider.scrolling.jsScrolling(false);
  8. }
  9. });

That's all, now go and check how your app performs under Android.