Slow scrolling list on iPad when scrolling in overflow: auto div

Question

I am developing a Phonegap application for major os platforms and am currently testing it on an iPad with iOS 5. I am using jquery mobile. Therefore, for large screens, I used the jQuery splitview plugin. http://asyraf9.github.com/jquery-mobile/
I put

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

to scroll through the page instead of using iscroll as the plugin was used. Now, what happens is that the page does not load / repaint as the user scrolls. I have a list of 100 elements and I scroll through them.

Scrolling by itself is not slow, but it takes almost a full second to draw new lines to view new lines of the list. Prior to this, this is an empty area.

When I observe, I see that the list items are not displayed in view until the scrolling stops. (impulse scrolling)

A similar problem 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 for normal operation? The same thing works fine on Android tabs. Pls help.

EDIT: If I Use Only

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

then I do not encounter this problem of short-term spaces after scrolling, but then scrolling is very slow.

Please do not suggest using iScroll. Already tried this. its much slower than what i get from -webkit-overflow and i can't use it.

Answer 1

My approach

So, I tried a lot, and I read even more about this issue. I ended up with a solution that is “OK” for me (because it works), but which is definitely not close to “perfect”.

When using this CSS:

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

you have a lot of problems with complex designs (in my case, a full-screen background image), and this gets even worse when using absolute positioned elements and iframes . (Which - of course - and the one I need).

So what is this trick? Basically this CSS:

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

With this rule, content was almost always provided immediately without getting these empty areas. Only when scrolling for the first time really fast does it flicker a bit.

But be careful with the -webkit-transform: translate3d(0,0,0); rule -webkit-transform: translate3d(0,0,0); . Using this rule to a large extent in many children, Safari started: sometimes it slowed down, but it crashed almost all the time. It’s best to wrap all content elements in a single div , works great.

Are you done? Not really. There is also iframe -issue: ("argh")

IFrame

When the iframe not completely in the visible part of the container at the beginning, it is cropped or not even displayed at all. Sometimes this can happen while scrolling. So, I tried to get Safari to re-display this part at any time when the scrolling was completed, and came up with the following:

 //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 the touch device is that it only fires when the scroll ends, so this function does not start at any time, but when the pulse comes to an end. The short movement is not actually visible.

So perhaps this is useful for someone.

Additional Information

Here are some more links on this issue:

• About how the scroll event fires in iOS:

  javascript scroll event for iPhone / iPad?

• Error message for Apple:

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

• iframe example with the same problem:

  stack overflow

Answer 2

We used the plugin below in our project, have you tried this?

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

IOS uses hardware acceleration to render scrolling. It is pretty easy to use, all you have to do is assign an extra class to your div.

We had some problems with Android 2 with this plugin, to overcome these problems, we changed the scrollMethod property in jquery.mobile.scrollview.js .

I hope this helps you solve your scroll problem.