Overflow auto not working on iphones and ipads

[dc dalton]

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?

[chris.upjohn]

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.

[Paul O'B]

ios5 can now do scrollbars (and position:fixed).

[dc dalton]

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'?

[chris.upjohn]

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.

[Paul O'B]

Here's a video of it in action