CODEWITHSUNDEEP
androidcsscordova
Kody R.
Kody R.

Reputation: 2460

Cordova android scrolling/performance issues

I use the following CSS to create smooth scrolling for my Cordova app

.scrollable { 
    overflow: auto;
    -webkit-transition-property: top, bottom;
    transition-property: top, bottom;
    -webkit-transition-duration: .2s, .2s;
    transition-duration: .2s, .2s;
    -webkit-transition-timing-function: linear, linear;
    transition-timing-function: linear, linear;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
}

This works wonderfully on iOS, but for some reason on Android not so much. Overall performance with Android isn't close to what iOS is either, but it is most noticeable when scrolling. Any suggestions? I have android:hardwareAccelerated="true" on, but that doesn't seem to make much of a difference.

Upvotes: 1

Views: 3449

Answers (1)

Kevin
Kevin

Reputation: 2893

Android browser scrolling is always a pain, the performance is much worse than iOS. That's why hybrid app frameworks like Ionic has introduced native scrolling to android, which makes the performance much better. Ionic really rocks, but if you don't want to use it, you may do some Googling to find out more information about android native scrolling, or read its source code to find out how they achieved it and port it to your project.

Another way to solve this problem is to embed Crosswalk to your android app, it's a Chromium based webview. The downside is that the size of your APK will increase by 20MB, but performance and consistency on different versions of Android OS will really improve a lot.

Upvotes: 3

Related Questions