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.

Answer 1

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

Answer 2

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, ie 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>

Answer 3

Because of "fixed" positioning of iFrame,

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

So here jsFiddle example