CSS iframe size on iOS

Question

There is an iframe here, which basically has more content than is inserted into the frame. The frame size is based on the size of the browser screen and allows you to scroll overflows, which works fine in all browsers except iOS. On iOS, Safari decides to resize the frame to fit the content. Not what you expect.

Sample jsFiddle code:
http://jsfiddle.net/R3PKB/2/

Try it on your iOS devices:
http://jsfiddle.net/R3PKB/2/embedded/result

HTML:

<div class="frame_holder"> <iframe class="my_frame"> // The content </iframe> </div> 

CSS:

 body { position: relative; background: #f0f0f0; } .frame_holder { position: absolute; top: 50px; bottom: 50px; left: 50px; right: 50px; background: #ffffff; } .my_frame { width: 100%; height: 100%; border: 1px solid #e0e0e0; } 

Answer 1

You can make it work by adding a wrapper div with overflow: auto; and -webkit-overflow-scrolling:touch; . Here is your example: http://jsfiddle.net/R3PKB/7/

According to previous questions about SO, this is a bug with iOS 4. I found more information here: https://stackoverflow.com/a/166263/ iframe about iOS content trimming (iPad)

Answer 2

This is an old question, but since it comes first in google and the problem exists on modern ios devices, I am posting the best fix I found on this page: How to get IFrame to respond in Safari iOS?

Basically, if you have an iframe with a scroll (say a Twitter widget), the solution above will not work very well, because it makes the parent scrollable. The fix that worked for me is replacing height: 100% with height: 1px; min-height: 100%; height: 1px; min-height: 100%; .

Answer 3

If iOS Safari displays your iframe content from a different source than expected (that is, it is shifted by a few pixels), try adding scrolling="no" as the iframe attribute. This should prevent the automatic selection of content.

More details here.

Answer 4

using height: 1px; min-height: 100%; height: 1px; min-height: 100%; didn't work for me, although I don't need the scroll element. I should have used overflow:auto; surrounded by div . Please note that this method is not recommended, as it may have unintended consequences, but I tested Android / iOS and desktop browsers and could not find any problems. fingers crossed .

This is a good post from Andy Shora on some iOS iframe nuances: http://andyshora.com/iframes-responsive-web-apps-tips.html