SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overflow auto not working on iphones and ipads

    Long time client called the other day to tell me the scroll bars on the inner content on his site is not working on iphones and ipads .. site is 100% valid so I haven't a clue what the problem might be. I also don't have an iphone or ipad to even look at it.

    Site is http://leeritenour.com

    the scrolling div for the page content is styled as such:

    div#innerscroll {
    padding: 15px 0;
    overflow: auto;
    height: 500px;
    }

    Nothing tricky, nothing fancy so what the heck is the problem with these devices?

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The iPhone, iPad and iPod touch don't have scroll bars, instead they use finger scroll inputs on the screen to determine what to scroll and which direction it should move. I assume the issue your having is you have a scrollbar set on an element other then the body which is causing a conflict?

    Simple solution, on all 3 technologies all you simply need to do is grab 2 fingers (index and middle is common) and start scrolling inside the child element.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,293
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    ios5 can now do scrollbars (and position:fixed).

  4. #4
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    Simple solution, on all 3 technologies all you simply need to do is grab 2 fingers (index and middle is common) and start scrolling inside the child element.
    Can I get that in English please? What the heck are you talking about when you say 'grab 2 fingers'?

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    For instance, you scroll normally by commonly using your index finger which is great for normal vertical and horizontal scrolling. To scroll inside a child element simply use the same principal but this time use your index and middle finger for example and start scrolling inside the element, what this will do is force Safari to change the scope of what it's scrolling on the page.

    It may sound a little confusing but i actually found the feature by accident and since then it's worked great on iOS devices.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,293
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Here's a video of it in action


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •