On the iPad, don’t try to fix scrolling

I have to admit that this really bothers me. Yesterday, I decided to write a little tool to let my boss create his presentations on an iPad by sorting a set of pre-created images. Nothing fancy, but I needed two separately scrolling viewports that are NOT operated with the two-finger-dragging-gesture. Seemed pretty straight forward. Make the elements in the last-touched element position:absolute, so that they scroll with the document, while keeping the rest position:fixed so that they stay were they are. Tried it on various browsers on both Android and Windows and it’s so braid-dead simple that even IE can cope.

The thing that I was worried about was that the iPad would smooth-scroll to the new scroll position that’s needed when you return to a previously-scrolled element (you can’t just move the element to the correct position, because that would usually be negative and that means that you wouldn’t be able to scroll to the left-most parts of the element). Turns out that part worked, but everything else fell to pieces. Switching between fixed and absolute a couple of times with big elements almost always crashes Safari straight away. Plus, after switching a couple of times, the iPad would usually get confused and move the scrollable area to some arbitrary rectangle.

I’m sorry, but I really don’t know how to say this nicely: Apple, get your act together. The iOS browser was great when it came out, but having to worry about scrolling feels like the nineties all over again.

11 thoughts on “On the iPad, don’t try to fix scrolling”

  1. #divToScroll{
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

    this enables native elastic overflow scrolling in iOS

  2. Thank you very much Travis, I really couldn’t find anything about it since the property seems to be barely documented. More importantly, it’s easily overlooked on Google since the whole can’t-scroll-iframe is also a user problem. Is there any good documentation from Apple, because all I can find are documents talking about CSS basics.

  3. Thanks a lot. I usually get by fine ignoring the iPad, but every once in a while I get a special request… and usually the problems are solvable using Google, but this time I really would have needed the official documentation (although I have to say, that I wouldn’t have assumed this to be the solution to my problem, since the description appears to deal with something entirely different). Just wish there was a half-decent simulator that runs on Windows, Linux or anything else really that doesn’t have an Apple logo.

  4. That’s what it says, BTW:
    “Specifying this style has the effect of creating a staking context (like opacity, masks, and transforms). “

  5. Wouldn’t bother me in this particular case, but still good to know. I just wish I knew the rationale behind -webkit-overflow-scrolling… why is this even needed? One could argue that overflow:auto is not entirely clear, but overflow:scroll quite definitely means that it should scroll under all circumstances.

    Also, this seems to be listed as a CSS3 property on some pages, but I can’t find any proposal or anything at the w3c… I assume this is really just proprietary with no standardization planned right now, correct?

  6. @Travis Beck, this totally saved me after hours of troubleshooting why I randomly got a strange refresh on my scrolling divs on the iPad. Thanks!

  7. @Matt thanks for the link to the documentation. Not really useful but I found some info. Apple doesn’t seem to bother with this problem, so we have to work with what we have.

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.