title: "-webkit-overflow-scrolling: touch" causing vertical scrolling problems on mobile
body: <p>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.</p>
  
  <p>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).</p>
  
  <p>Mobile Webkit browsers <strong>can't</strong> scroll past the table in this example:
  <a href="http://jsfiddle.net/tArEy/">http://jsfiddle.net/tArEy/</a></p>
  
  <p>Then I commented out the following line to make the vertical scrolling work. However, this made the horizontal scrolling a little bit choppy.</p>
  
  <pre><code>-webkit-overflow-scrolling: touch;
  </code></pre>
  
  <p>Mobile Webkit browsers <strong>can</strong> scroll past the table in this example, but it's a little more glitchy.
  <a href="http://jsfiddle.net/tArEy/1/">http://jsfiddle.net/tArEy/1/</a></p>
  
  <p>Does anyone have an idea of how to fix this using CSS only?</p>
  
  <p>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).</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>It turns out that scrolling horizontally is horribly buggy in mobile webkit browsers without the following line in your CSS:</p>
  
  <pre><code>-webkit-overflow-scrolling: touch;
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>I got my hands on an iphone.   the overflow scrolling is hardware accelerated and works flawlessly.  This seems to be a <strong>Chrome for Android</strong> problem only.</p>