In the midst of creating a new mobile website design that is responsive, an issue arose during testing on my phone. It seemed impossible to scroll vertically past a certain point if there was horizontal scrolling involved.
To better illustrate this problem (although you may not be able to see it on your phone), here is an example:
Mobile WebKit browsers are unable to scroll past a table in this test case: http://jsfiddle.net/tArEy/
I made an adjustment by commenting out a specific line which allowed for vertical scrolling, but unfortunately resulted in choppy horizontal scrolling.
-webkit-overflow-scrolling: touch;
After this change, mobile WebKit browsers were able to scroll past the table, although encountering some glitches. http://jsfiddle.net/tArEy/1/
If anyone has suggestions on how to address this issue using CSS alone, I would greatly appreciate it.
Please note that these demos should be tested on a browser (I am currently using Chrome on Android, with the assumption that this issue might also apply to iPhones).
Edit:
Without the following CSS line, horizontal scrolling becomes extremely problematic on mobile WebKit browsers:
-webkit-overflow-scrolling: touch;
However, adding this line makes vertical scrolling impossible, presenting a dilemma. Other non-WebKit browsers have no trouble with horizontal scrolling.
Edit 2:
Upon testing with an iPhone, it's clear that overflow scrolling works seamlessly and is accelerated by hardware. This issue appears to be specific to Chrome for Android.