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;
}

Upvote from me for your clear analysis of this problem. – Garavani Aug 31 '14 at 13:43 — Garavani, Aug 31 '14 at 13:43

score 52 · Accepted Answer · edited May 23 '17 at 11:54

52

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

edited May 23 '17 at 11:54

Community

1
1

answered Jun 05 '13 at 12:26

nvreez

666
6
10

Wow! That's definitely the closest solution I've seen to date.But the implementation is a bit more complicated and does not allow the iframe to be larger than the intended size. – Guido Bouman Jun 05 '13 at 12:43
Can you explain more what you mean and how we can help you more? What is the intended size, screensize with 50px padding? (like what you're using in the example) – nvreez Jun 05 '13 at 12:59
Marked as answer because there's no other solution due to bug / security feature in iOS. – Guido Bouman Jun 05 '13 at 14:37
Thanks, I need to set iFrame size to subframes for my html based iPhone app. – Michael Shopsin Nov 01 '13 at 14:58
This will break position:fixed elements inside the iframe. – Simon Backx Mar 28 '18 at 12:09
The answer below from @AndreiCojea actualy worked for me as I would expect this. – Andreas May 05 '18 at 09:37

score 11 · Answer 2 · edited May 23 '17 at 12:34

11

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%;.

edited May 23 '17 at 12:34

Community

1
1

answered Mar 17 '15 at 16:28

Andrei Cojea

635
6
16

1

This worked for me, the one above does not respect responsive layouts of the iframe content. – Andreas May 05 '18 at 09:35

score 7 · Answer 3 · answered Feb 17 '16 at 20:34

7

If iOS Safari is displaying your iframe content from a different origin than expected (i.e. it is shifted over by some pixels), try adding scrolling="no" as an attribute to the iframe. This should prevent it from automatically fitting its content.

More here.

answered Feb 17 '16 at 20:34

Kyle Dumovic

2,286
1
14
7

After 2 hours of seeking for a good solution.. this one fixed my issue! Thank you! – udidu Jun 13 '17 at 10:58
This did not work for me, but I was loading also from the same origine. – Andreas May 05 '18 at 09:35
I wish I could give multiple up votes to this answer. Bang on, solved my issue in iOS (Safari), iframe content was being cut off horizontally. Thanks a lot Kyle Dumovic – sghosh968 Jun 03 '18 at 08:23

score 1 · Answer 4 · answered Jul 09 '15 at 18:55

using height: 1px; min-height: 100%; did not work for me, though I did not need a scrolling element. I had to use the overflow:auto; on a surrounding div instead. Note that this method is discouraged as it may have unintended consequences, but I tested on Android/iOS and desktop browsers and could not find any issues yet. fingers crossed.

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

iframe size with CSS on iOS

4 Answers4

Linked

Related