-webkit-overflow-scroll:touch vertical scrolling only responds to horizontal swiping Travis June 16th, 2012

Filed under: browsers |

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

11 comments Add Yours »

  1. Tony Boyd June 26th, 2012 | 4:19 pm

    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.

  2. Travis June 26th, 2012 | 4:34 pm

    @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

  3. Tony Boyd June 26th, 2012 | 4:47 pm

    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!

  4. Gray July 23rd, 2012 | 6:58 pm

    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!

  5. Travis July 23rd, 2012 | 7:11 pm

    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 */

  6. Gray July 23rd, 2012 | 7:14 pm

    Figured it out, I was setting overflow-y: scroll; instead of overflow: scroll;.

  7. Tom Clarkson August 22nd, 2012 | 10:07 pm

    Sometimes this is only half the solution – the touch scrolling also gets confused if there is an iframe anywhere in the document.

    For extra confusion, neither of the triggers were in my own code – jQuery mobile hides the page content during initial rendering, and PhoneGap (pre 2.1) adds a hidden iframe for communication with the native layer.

  8. Mike November 17th, 2012 | 11:25 am

    I’m getting a slightly different problem.

    I’ve got:
    overflow-x: hidden;
    overflow-y: auto;

    As soon as I turn on:
    -webkit-overflow-scrolling: touch;

    Then all of a sudden horizontal scrolling works, which isn’t what I want. Any idea?


  9. Tim van Oostrom January 9th, 2013 | 7:13 am

    Saved me a lot of trouble, thanks!

  10. Leszek August 27th, 2013 | 12:33 am

    I just stumbled upon this bug just now. Everything worked fine on an iOS6 iPad, but iOS5 does the “horizontal scrolling” trick at random times. I’m using JQueryMobile so I don’t have full control over visibility of objects and every solution I tried so far, only makes it worse. If I toggle touch scrolling, the bug happens every time.

  11. Leszek August 27th, 2013 | 3:02 am

    I think I fixed it. The bug was caused by an invisible iframe created by jsconsole, which I was USING TO DEBUG the app! The irony…

RSS feed for comments on this post. TrackBack URL

Leave a comment