iOS Scrollbar Frustrations: Troubleshooting Overflow CSS

Developing for an iPad website, you stumbled upon an unexpected issue: CSS overflow properties (overflow: auto or scroll) fail to display scrollbars despite enabling two-finger scrolling. This quirk is exclusive to iOS devices.

Addressing the Issue:

Updated Fix (iOS 5beta and Onward):

As pointed out by kritzikratzi, a new property introduced in iOS 5beta (-webkit-overflow-scrolling: touch) can resolve this issue, triggering the expected scrolling behavior.

Original Remedy (iOS 5 and Below):

Unfortunately, neither overflow: auto nor scroll generates scrollbars on iOS devices due to the limited screen space. Instead, the two-finger swipe mechanism is the designated method for scrolling overflowing content.

Alternatives:

• JavaScript and jQuery: Leverage JavaScript and libraries like jQuery to create custom scrollbars for overflow elements.
• @media Queries: Use @media queries to hide the overflow and present content in full when on an iPhone device.

Example using @media queries: