Cordova android 滚动/性能问题

Question

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.

Answer 1

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.

Answer 2

In this article I assume that the reader is a cordova developer, and I'm not going to teach you the basics for that there are millions of articles you can find in web.

So if you are using jQuery, jQuery UI and row java scripts with apache cordova it's still ok if you developing some demo project or a pretty simple app.

But for a commercial level project you must use Angular JS or higher angular version ( IONIC Framework - Extended version of cordova ) to get better user experience.

I have no offence towards to jQuery and jQuery UI as they are still great tools. But when it's come to hybrid application development Angular perform lot better than jQuery or jQuery UI.

https://guntucomputerhacks.blogspot.com.au/2017/11/apache-cordova-scroll-bar-lagging-on.html