-webkit-overflow-scroll:touch vertical scrolling only responds to horizontal swiping June 16th, 2012
6 comments-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.
We had exactly the same problem and your solution saved the day. So thanks a lot for that. In our case, it was the container of the scrolling div that was the culprit rather than the body tag. However, I’m wondering if you know why it does this. We are converting an old legacy app to run on modern browsers and of the 30 or so views all but 2 work fine when “visibility: hidden” is removed (with a few tweaks) but I cannot remove it from these other 2 without extensively rewriting them which I would like to avoid, if possible. Any ideas why this behavior occurs? I’m wondering if there’s another way around it.
@Tony. I have no idea why it does this, I can only assume its a buggy implementation at the moment. Have you tried this? http://stackoverflow.com/questions/7808110/css3-property-webkit-overflow-scrollingtouch-error
Yeah, I saw this one before I came across yours and couldn’t find anything there that helped. Yours was the one that nailed it! I’ll probably just have to bite the bullet on these last 2 screens but, again, many thanks for figuring it out!
I’m getting the same problem, unfortunately removing the only instance of visibility: hidden; did not do the trick! I really want to implement this, but I can’t expect my users to scroll left/right to go up/down!
I’ve found that if the area to be scrolled is hidden when the dom loads, this will happen, so make sure that nothing is set to display:none or visibility: hidden.
However, opacity:0 seems to be fine. Another thing to consider is tricking webkit into turning on hardware acceleration for any element within the scrollable area that has a relative position. You can do this by adding
-webkit-transform: translate3d(0,0,0); /* turn on hardware acceleration */Figured it out, I was setting overflow-y: scroll; instead of overflow: scroll;.