slow list view scrolling on iPad when scrolling in an overflow:auto div

Question

I am developing a Phonegap app for the major os platforms and am currently testing it on an iPad with iOS 5. Im using jquery mobile. So for large screens i've used the splitview jquery mobile plugin. http://asyraf9.github.com/jquery-mobile/
I've put a

$scrollArea.css('overflow-y','auto');        
$scrollArea.css('-webkit-overflow-scrolling','touch');

to make the page scroll instead of using iscroll like the plugin was using. Now whats happening, is that the page isn't loading/repainting as the user scrolls. I have a list of 100 items and i scroll through them.

The scrolling itself isn't slow, but it takes almost a full second for the new list view rows to pop into view after it has been scrolled. Before that it's a blank area.

On observing, i can see that the the list items don't pop into view until the scrolling has come to a halt. (momentum scroll)

A similar issue is here http://forum.jquery.com/topic/help-with-slow-list-view-scrolling-on-ipad-when-scrolling-in-an-overflow-auto-div

What can i do to make this work normally?? The same thing works fine on android tabs. pls help.

EDIT: If i use only

 $scrollArea.css('overflow-y','auto');        

then i dont face this issue of momentary blank areas after scrolling, but then the scrolling is painfully slow.

Please don't suggest using iScroll. Already tried that. its much much slower that what i get with -webkit-overflow-scrolling, and i cant use it.

Answer 1

My Approach

So, I tried a lot and I read even more about this problem. I ended up with a solution which is "OK" to me (because it works), but which is definitely not near to "perfect".

When using this CSS:

.container {
    overflow:                   scroll;
    -webkit-overflow-scrolling: touch;
}

you run into a lot of problems when having a complex design (in my case a fullscreen background image), and it gets even worse, when using absolute positioned elements and iframes. (Which is - of course - both the case I needed).

So, what did the trick? Basicly this CSS:

.container > * {
    -webkit-transform:          translate3d(0,0,0);
}

With this rule the content was almost all the time rendered right away without getting those blank areas. Only when scrolling down the first time very fast it's a little flickering.

But be careful with the rule -webkit-transform: translate3d(0,0,0);. Using this rule heavily on many child elements forced Safari to: sometimes slow down but almost all the time to crash. The best thing is to wrap all content elements into a single div, works fine.

Done? Not really. There is still the iframe-issue: ("argh")

iframe

When the iframe is not fully in the visible part of the container at the start it gets cropped or is not even displayed at all. This could sometimes also occur when scrolling around. So, I tried to force Safari to re-render this part anytime scrolling is completed and came up with this:

//using jQuery
var container   = $('#container');
var iframe  = $('#iframe');
container.scroll( function (event) {
    iframe.css( 'marginLeft', 1 );
    setTimeout( function() {
        iframe.css ( 'marginLeft', 0 );
    }, 1 );
});

The thing with the scroll event on a touch device is, that it's only triggered when the scrolling has come to an end, so this function is not fired at anytime but when the momentum has come to an end. The short movement is actually not visible.

So, maybe this is helpful for somebody.

Further information

Here a few more links on this issue:

• On how the scroll event is fired in iOS:

  javascript scroll event for iPhone/iPad?

• Bug report of this problem to Apple:

  https://stackoverflow.com/a/7893031/1456376

• iframe example with the same problem:

  https://stackoverflow.com/a/8275972/1456376