If you wish to use iframes on a website or application that should be accessible by users on mobile safari you should be aware that you cannot constrain the width and height of the iframe on your side. If the content that is loaded within the iframe is higher or wider than what you intended, the iframe will simply grow and push your layout in ways you are not intending. Furthermore, if you actually wanted to limit the height of the iframe resulting in the content being scrollable this will not be the case.
Let’s show how the scrollable iframe problem can be solved.
<html> <head> <title></title> </head> <body> <div style="width: 800px; height: 400px; border: solid 1px #FF0000; overflow: scroll; -webkit-overflow-scrolling: touch"> <iframe style="width: 800px" src="frame.htm"></iframe> </div> </body> </html>
<html> <head> <title></title> </head> <body> <div style="width: 1200px; background-color: #0000FF; text-align: center"> <h1>AAAAAAAAAAAAAAAAAAAAAA</h1> <h1>BBBBBBBBBBBBBBBBBBBBBB</h1> <h1>CCCCCCCCCCCCCCCCCCCCCC</h1> <h1>DDDDDDDDDDDDDDDDDDDDDD</h1> <h1>EEEEEEEEEEEEEEEEEEEEEE</h1> <h1>FFFFFFFFFFFFFFFFFFFFFF</h1> <h1>GGGGGGGGGGGGGGGGGGGGGG</h1> <h1>HHHHHHHHHHHHHHHHHHHHHH</h1> <h1>IIIIIIIIIIIIIIIIIIIIII</h1> <h1>JJJJJJJJJJJJJJJJJJJJJJ</h1> </div> </body> </html>
By wrapping the iframe inside a div container and applying ‘-webkit-overflow-scrolling: touch’ to said div the iframe will now expand inside the div which hides whatever overflows allowing you to scroll the content. In the example above the iframe will grow to 1200px simply ignoring the 800px specified in default.htm. Without the div the entire 1200px would be visible but is instead cut off by the 800px wide div, making it so that your layout is at least not pushed out.
Now this maybe not be what you want. Maybe you want the width and height of the iframe to squeeze the page inside the frame as you would normally be able to do in any desktop browser. Currently, I know of no solution solving this desire and the observed behavior is as intended by Apple.