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 splitvie

Answer 1

We have used the plugin below in our project, did you try this one out?

https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview

On iOS it uses hardware acceleration to render the scrolling. It is rather easy to use, all you have to do is to assign an additional class to your div.

We did have some issues on Android 2 with this plugin, to overcome those issues we changed the scrollMethod property in jquery.mobile.scrollview.js.

I hope it helps you solve your scrolling problem

Answer 2

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