iframe size with CSS on iOS

Question

There's an iframe, which basically has more content than fits into the frame. The sizing of the frame is based on the browser screen size and lets the overflow scroll, which works perfectly on all browsers, except for iOS. On iOS, safari decides to resize the frame to fit the content. Not what you'd expect.

Example code on jsFiddle:
http://jsfiddle.net/R3PKB/2/

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

The HTML:

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

The 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 wrapping div with overflow: auto; and -webkit-overflow-scrolling:touch;. Here's your example with it: http://jsfiddle.net/R3PKB/7/

According to previous questions on SO it's a bug since iOS 4. I found more info here: https://stackoverflow.com/a/6721310/1047398 iframe on iOS (iPad) content cropping issue

Answer 2

This is an old question, but since it comes first on google and the issue exists on nowadays ios devices, I repost a better fix that I found on this page: How to get an IFrame to be responsive in iOS Safari?

Basically, if you have an iframe with scroll (let's say a twitter widget), the solution above won't 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%;.