iPad Safari - Overflow Problems Investigation

The following is a scrollable div. If you're in multi-touch Safari (which I have been informed is technically called Mobile Safari), note the absence of scroll bars. But at least you can 2-finger scroll it:

<div align="center" style="border:1px solid black; height:200px; width:600px; overflow:auto;">
    <h3>Scrollable Div</h3>
    <img src="/library/images/under-construction.simpsons.mit.edu.green.jpg" alt="This page is a work in progress.">
</div>

Scrollable Div

Now here's that same graphic in a frame (specifically an iFrame), also without scroll bars in multi-touch Safari. In this case, Safari expanded it outside of its height:200px; width:600px, even though I told it "!important". (In CSS, "!important" means "pay attention, this is important", unlike C/Java/JavaScript, where it would mean "not important".) I can't get multi-touch Safari to adhere to my height and width specifications, which is another bug. It doesn't scroll within its 1 pixel border, but in this case, it's only because it doesn't have to:

<iframe
    height="200px"
    width="600px"
    style="border:1px solid black; height:200px !important; width:600px !important; overflow:auto;"
    src="dsp_frames_inner_document.html">
</iframe>

I'm starting to suspect that the problem with frames not scrolling is that multi-touch Safari always expands the frame, and outer containers (block elements, used for positioning) are defaulting to overflow:hidden to prevent double scroll bars in MSIE (non-standard box model).

<div style="border:1px solid black; height:202px; width:602px; overflow:hidden;">
    <iframe
        height="200px"
        width="600px"
        style="border:1px solid black; height:200px !important; width:600px !important; overflow:auto;"
        src="dsp_frames_inner_document.html">
    </iframe>
</div>

See? If Safari would honor the iFrame's height and width, as standards-compliant browsers do, and allow scrolling the frame as needed for overflow:auto, as standards-compliant browsers do, then the outer container wouldn't be a problem.

Try it on the Mac or PC. You'll see a 2-pixel border, one for the div, one for the frame. So the scroll bars had to have been generated for the frame. But in multi-touch Safari, the 2-pixel border ends at the expanded frame's truncation. So the border-bottom is just 1-pixel, attributable only to the div.

In any case, this is really getting to be a royal pain. My employer's website uses frames all over the place to cut down on page load times, and none of them work right on the iPad.

Summary of overflow problems on iPad (current state of the investigation):

Scrollable divs with overflowing content don't show scroll bars.
Frames with overflowing content refuse to honor height and width.
Frames problem is not caused by mishandling overflow as "overflow:visible", because border expands along with content.
Even if frames did honor height and width, and allowed scrolling to overflow content, they probably STILL wouldn't put up scroll bars, because: (1) scrollable divs don't, and (2) Apple likes to be internally consistent with its UI.

If dynamically generating web pages, possible workaround for frames:

Regular Expression search HTTP_USER_AGENT for "iPad|iPhone|iPod".
If found, put "overflow:auto" on the containing div.

No workaround for lack of scroll bars. Users won't know that there's content they aren't seeing unless they happen to notice visible truncation (Not guaranteed that truncation boundary won't occur in white space.)