Android JQuery Mobile listview scroll performance

You might have read my recent flame on Google for not updating their Android stock browser. The flame was partially written because of the terrible scroll performance on JQuery Mobile listviews. Luckily for me, I recently managed to boost the listviews scroll performance for hybrid Android apps.

Ill give you some context. As a Software Developer, I have been creating a Phonegap/Cordova app. This app is a front-end for modeldriven applications. These applications are mainly build to view and edit business data, such as ERP, HRM, etc. Note that the app mainly consists out of grids and forms. Here's a screenshot.

Listview performance is very important for me. You can imagine that my app has to handle large amounts of data. Paging my data partially fixes that problem. However the combination of iScroll with a JQM listview and the Android stock browser ruins it completely. Scrolling through the listview becomes completely laggy and buggy.

I hear you thinking, cut the crap and show us the fix. All right, all right here is the fix:

#listview li {
    -webkit-transform : translateZ(0); 
    -o-transform : translateZ(0); 
    -moz-transform : translateZ(0); 
    transform : translateZ(0); 
}

Wait what? A CSS fix? Yeah CSS is your solution. This fix works because HTML5 and CSS3 is very poorly supported and implemented in the Android stock browser. But how does this fix a thing? Let me elaborate. iScroll sets the following CSS on the scroll div:

element.style {
    -webkit-transition-property: -webkit-transform;
    -webkit-transform-origin-x: 0px;
    -webkit-transform-origin-y: 0px;
    -webkit-transition-duration: 0ms;
    -webkit-transform: translate(0px, -2631px) scale(1) translateZ(0px);
}

Note that the web-transform is set to a very large area. Webkit will try to use hardware acceleration to enhance the scrolling performance. However this ruins more then it fixes.

Useful links:
Orginal lead for solving the problem:
http://stackoverflow.com/questions/9006278/jquery-mobile-listview-is-too-slow-with-iscroll
JSfiddle POC:
http://jsfiddle.net/SuY7f/1/
More background information:
http://stackoverflow.com/questions/12228053/what-does-usetransform-and-usetransition-options-from-iscroll-do
http://cubiq.org/you-shall-not-flicker

Keywords:
iScroll, jQuery Mobile, JQM, slow, performance, webkit, webkit-transform, hardware acceleration, Android