"-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.