-webkit-overflow-scroll:touch vertical scrolling only responds to horizontal swiping June 16th, 2012
-webkit-overflow-scroll:touch is a new css property for safari introduced in iOS5. It allows content to scroll with the native iOS inertial scrolling when overflow-x or overflow-y is set to auto or scroll. Before this property you had to use a two finger scroll gesture and it was not the smooth scrolling inertial effect we’ve come to expect in iOS.
Recently i was using this on a project and the weirdest thing was happening. I had set overflow-x to hidden and overflow-y to scroll and added the -webkit-overflow-scroll:touch to the div in question, however when i pulled it up on my iPad and tried to scroll vertically, nothing happened. If i used the crappy 2 finger scroll gesture it would scroll, but the smooth inertial scrolling was not working. Then i accidentally swiped the div sideways as if it had horizontal scrolling and lo-and-behold it zoomed up the page and bounced as it hit the top. Inertial scrolling was working but it was scrolling vertically when i swiped horizontally, WTF!
Turns out I was setting the body tag’s visibility property to hidden until my typekit web fonts loaded so that there wasn’t a flash of unstyled text while the fonts were downloading. This caused the iOS over scroll scrolling to behave all wonky. Once i removed the visibility:hidden property from the body tag it scrolled normally. Hopefully this post will help someone else who runs into this problem because the solution is anything but obvious.