title: How to get an IFrame to be responsive in iOS Safari?
body: <p>The problem is that when you have to use IFrames to insert content into a website, then in the modern web-world it is expected that the IFrame would be responsive as well. In theory it's simple, simply aider use <code>&lt;iframe width="100%"&gt;&lt;/iframe&gt;</code> or set the CSS width to <code>iframe { width: 100%; }</code> however in practice it's not quite that simple, but it can be.</p>
  
  <p>If the <code>iframe</code> content is fully responsive and can resize itself without internal scroll bars, then iOS Safari will resize the <code>iframe</code> without any real issues.</p>
  
  <p>If you consider the following code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=9,10,11" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      &lt;title&gt;Iframe Isolation Test&lt;/title&gt;
  
      &lt;style type="text/css" rel="stylesheet"&gt;
  
          #Main {
              padding: 10px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Iframe Isolation Test 13.17&lt;/h1&gt;
      &lt;div id="Main"&gt;
          &lt;iframe height="950" width="100%" src="Content.html"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>With the <em>Content.html</em>:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=9,10,11" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      &lt;title&gt;Iframe Isolation Test - Content&lt;/title&gt;
  
      &lt;style type="text/css" rel="stylesheet"&gt;
  
          #Main {
              width: 100%;
              background: #ccc;
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="Main"&gt;
          &lt;div id="ScrolledArea"&gt;
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada purus quis commodo convallis. Fusce consectetur mauris eget purus tristique blandit. Nam nec volutpat augue. Aliquam sit amet augue vitae orci fermentum tempor sit amet gravida augue. Pellentesque convallis velit eu malesuada malesuada. Aliquam erat volutpat. Nam sollicitudin nulla nec neque viverra, non suscipit purus tincidunt. Aenean blandit nisi felis, sit amet ornare mi vestibulum ac. Praesent ultrices varius arcu quis fringilla. In vitae dui consequat, rutrum sapien ut, aliquam metus. Proin sit amet porta velit, suscipit dignissim arcu. Cras bibendum tellus eu facilisis sodales. Vestibulum posuere, magna ut iaculis consequat, tortor erat vulputate diam, ut pharetra sapien massa ut magna. Donec massa purus, pharetra sed pellentesque nec, posuere ut velit. Nam venenatis feugiat odio quis tristique. 
          &lt;/div&gt;      
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then this works without issues in iOS 7.1 Safari. You can change between landscape and portrait without any issues.</p>
  
  <p><img src="https://i.stack.imgur.com/5VA6C.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/0p1Rs.png" alt="enter image description here"></p>
  
  <p>However by simply changing the <em>Content.html</em> CSS by adding this:</p>
  
  <pre><code>    #ScrolledArea {
          width: 100%;
          overflow: scroll;
          white-space: nowrap;
          background: #ff0000;
      }
  </code></pre>
  
  <p>You get this:</p>
  
  <p><img src="https://i.stack.imgur.com/y1D6C.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/fRIQ0.png" alt="enter image description here"></p>
  
  <p>As you can see, even though the <em>Content.html</em> content is fully responsive (<em>div#ScrolledArea</em> has <code>overflow: scroll</code> set) and the iframe width is 100% the iframe still takes the full width of the <em>div#ScrolledArea</em> as if the overflow does not even exist. <a href="http://www.idra.pri.ee/sample/IframeIsolationTest/">Demo</a></p>
  
  <p>In cases like this, were the <code>iframe</code>content has scrolling areas on it, the question becomes, how to get the <code>iframe</code> responsive, when the iframe content has horizontally scrolling areas? The problem here is not in the fact that the <em>Content.html</em> is not responsive, but in the fact that the iOS Safari simply resizes the iframe so that the <code>div#ScrolledArea</code> would be fully visible.</p>