Question

I’m developing a iOS HTML 5 webapp and need to display a large page with lots of text. A iframe seems the right tool as it allows scrolling to view the content on a small screen. Using iOS 5+ and overflow: auto; -webkit-overflow-scrolling:touch; in the iframe’s style I can get working scrolling in a iframe on the iPhone.

The issue is that when scrolling horizontally to view more of the frames content the frame is blank, scrolling down works as expected. I suspect that the problem lies in the fixed viewport tag:

<meta name="viewport" content="width=device-width; minimum-scale=1.0; initial-scale=1.0; user-scalable=yes">

I have the iframe setup is follows:

<div id="framecont" style="height: auto; width: auto; overflow: auto; -webkit-overflow-scrolling:touch;">
    <iframe height="100%" id="iframe" scrolling="no" width="100%"></iframe>
</div>

Any advice on alternatives to the iframe or a solution to the content drawing issue would be greatly appreciated.

Answer 1

A better way to do this would be to use a div. I tested out your code and iframes do not seem to allow horizontal scrolling at all.

Unless you need to get the content from an external page (as that’s what iframes are for), this should work:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<div id="framecont" style="background-color:red; height: 200px; width: 200px; overflow: auto; -webkit-overflow-scrolling:touch;">
<div class="inside" style="background-color:blue; width: 400px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus tempus enim, ut ornare enim aliquet et. Nunc porta porttitor dolor, ut pharetra augue venenatis et. Ut felis diam, consectetur a viverra a, auctor vel lorem. Ut tempor magna eget sem faucibus adipiscing condimentum ipsum tincidunt. Sed aliquam venenatis enim ut dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas adipiscing ullamcorper tincidunt. Etiam fermentum arcu quis mi malesuada eget varius lorem convallis.
</div>
</div>

The viewport is set (I only included this because I had it on my test page) so that page scrolling is disabled. The #framecont div is like a container, with a set width and height. The inside div, .inside, acts as the direct container to the content. The width is set to a greater width than the parent div, so that it will scroll horizontally so you can see the rest of what’s in the div.

You do not need to set the height of the second div as it will fill 100%. You could for instance, set the second div to a width of 1000px, if that’s how long you wanted the content to scroll to, and then you would be able to scroll that amount.