"-webkit-overflow-scrolling: touch" causing vertical scrolling problems on mobile

Question

I am in the process of making a responsive mobile website. When testing on my phone, I noticed that I couldn't scroll vertically past something that could be scrolled horizontally.

Here is an example of what I mean (sorry you can't see the horizontal scroll on your phone but just trust me that it works).

Mobile Webkit browsers can't scroll past the table in this example: http://jsfiddle.net/tArEy/

Then I commented out the following line to make the vertical scrolling work. However, this made the horizontal scrolling a little bit choppy.

-webkit-overflow-scrolling: touch;

Mobile Webkit browsers can scroll past the table in this example, but it's a little more glitchy. http://jsfiddle.net/tArEy/1/

Does anyone have an idea of how to fix this using CSS only?

The demos have to be tested on a browser. (I'm running the Chrome browser on Android. I assume the iPhone has the same problem).

Edit:

It turns out that scrolling horizontally is horribly buggy in mobile webkit browsers without the following line in your CSS:

-webkit-overflow-scrolling: touch;

However, that line makes it impossible to scroll vertically so I'm kind of at a standstill. Other non-webkit browsers scroll horizontally just fine.

Edit 2:

I got my hands on an iphone. the overflow scrolling is hardware accelerated and works flawlessly. This seems to be a Chrome for Android problem only.

Answer 1

This was a bug in chrome for Android only. It was fixed in a recent upgrade.

Answer 2

this might help with the problem: http://filamentgroup.github.com/Overthrow/ overflow-scrolling is only supported in newer phones. when i've tested i've seen if newer phones have slight scrolling problems supporting android 2.x and ios4 will make you cry.

if you are scrolling horizontally you might want to rethink your design though.