iFrame wider than the entire screen on iPhone 6

Question

Could really use the help on this one.

I'm trying to open an iFrame in my site that should cover the entire screen. Unfortunately, in iPhone 6 and above, its width is actually larger. We have a wide div next to the iframe. When I delete it everything is okay. The markup and styles is pretty straight forward:

<div id="someDiv" style="width: 1000px"></div>
<iframe id="ourIframe" style="position: fixed; width: 100%; height: 100%"></iframe>

Android works okay.

I couldn't find a single resource online with this issue.

Please help out. Thanks in advance.

Can you provide a [working example](http://stackoverflow.com/help/mcve)? several things can make this effect. — Dekel, Jun 26 '16 at 14:46
Your 1000px div is going to stretch the body to at least 1000px. Why not make that 100% as well? — Ted Noelker, Jun 26 '16 at 16:07
Because this iframe is part of an embedded code and the div belongs to the client — atardadi, Jun 26 '16 at 17:09

score 16 · Accepted Answer · edited May 23 '17 at 12:08

16

There are two way to achieve your solution.

1. Simply wrap your iframe in a div with:

overflow: auto;-webkit-overflow-scrolling:touch;

Here's your example with it: http://jsfiddle.net/R3PKB/7/

2. Or you can try this using css:

iframe {
         width: 1px;
         min-width: 100%;
         *width: 100%;
    }

If you set the width to lower than the portrait width and set the min-width to 100%, then you sill get width: 100%, but this time a version that actually works and now the iframe takes the actual container width and not the landscape width. The *width: 100%; is there so that in IE6 the width would still be 100%.

However this only works with the iframe attribute scrolling="no", if the scrolling is allowed, then it does not work anymore. So this might limit it's usefulness in some cases.

Here is a link to a more detail answer

edited May 23 '17 at 12:08

Community

1
1

answered Jun 30 '16 at 07:42

Himanshu Vaghela

1,089
11
21

The css solution you posed works perfect for me. I had the exact same problem a few weeks ago at work with a customer and I solved it with this exact same CSS. – Kamelkent Jul 01 '16 at 09:16
Some times we forget small things.. Cheers!! :) @Kamelkent – Himanshu Vaghela Jul 01 '16 at 09:19
I have been banging on my head on the wall for hours on this. The webkit-overflow-scrolling solved it for me. Thanks! – Scott Smith Jul 26 '17 at 04:51

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

I sometimes run into similar issues on mobile browsers. There are some key differences in the way different browsers handle certain styles layouts.

In my experience the best way to combat this is to give multiple boundaries, i.e. max-width / min-width over several media queries. This can be a pain in the ass for more intense styling, but for just one iFrame I think it can be done:

CSS

#ourIframe {
  display: block; /* Because you don't know if the document has altered css rules for iFrames */
  clear: both; /* Because you have no idea what css could be applied to #someDiv - although with position: fixed, this shouldn't be necessary at all... */
  position: fixed;
  width: 100%; /* Fall back in case the vw is not supported. */
  width: 100vw;
  height: 100%; /* Fall back */
  height: 100vh;
  overflow-x: hidden; /* in case there is a few pixels spillage from padding, you don't want a horizontal scroll bar. */
  overflow-y: auto; /* Only gives the scroll bar if needed.*/ 
}

@media screen and (max-width: 320px) { /* iPhones 4 & 5 */
  #ourIframe {
    max-width: 320px;
    min-width: 320px;
  }
}

@media screen and (max-width: 375px) { /* iPhone 6 */
  #ourIframe {
    max-width: 375px;
    min-width: 375px;
  }
}

HTML

<div id="someDiv" style="width: 1000px"></div>
<iframe id="ourIframe"></iframe>

score 2 · Answer 3 · answered Jun 28 '16 at 00:09

2

Because of "fixed" positioning of iFrame,

There must be a parent div element with set width 320px or 100vw;
Second iFrame height and width must be inherit; height:inherit; width:inherit; not to exceed screen boundaries.

So here jsFiddle example

answered Jun 28 '16 at 00:09

Erdal SATIK

652
2
9
32

iFrame wider than the entire screen on iPhone 6

3 Answers3

CSS

HTML