title: Workaround to iOS 11 WebKit iframe bugs
body: <p><strong>iOS WebKit iframe bug description</strong></p>
  
  <p>iOS WebKit resizes iframes to the full size of their content (see pic below). It's a bug known since 2016 and still not resolved in iOS 11: <a href="https://bugs.webkit.org/show_bug.cgi?id=155198" rel="noreferrer">https://bugs.webkit.org/show_bug.cgi?id=155198</a></p>
  
  <p><a href="https://i.stack.imgur.com/Ey7lO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ey7lO.png" alt="iOS 11"></a></p>
  
  <p><strong>My current findings</strong></p>
  
  <p><strong>1. For fixed iframe content (e.g. video)</strong></p>
  
  <p>It's enough to apply CSS below, but it prevents iframe content scrolling.</p>
  
  <pre><code>.fixed iframe {
      width: 0;
      height: 0;
  
      min-width: 100%;
      min-height: 100%;    
  }
  </code></pre>
  
  <p><strong>2. For scrollable iframe content (e.g. pages)</strong></p>
  
  <ol>
  <li>We need two iframe containers: one as a boundary (fixed size) and second one as a scrolling area.</li>
  <li>To fit iframe contents, its div container must have w/h defined in pixels. Any relative measures (like %, vw/vh) doesn't work.</li>
  <li><p>Some RWD pages (let's say with "incomplete RWD") are experiencing iframe overflow (iframe does not fit into the iframe container).
  Unfortunately, we can't fix that from the iframe outside and to solve this issue, document inside iframe requires at least:</p>
  
  <pre><code>body {
      max-width: 100vw !important;
  }
  </code></pre>
  
  <p>Optionally, we can scale iframe content as a last resort.</p></li>
  <li><p>Because of 2, to keep container proportion we need to use at least CSS media queries or JS to adjust its height.</p></li>
  </ol>
  
  <p><strong>Some incomplete solutions</strong>:</p>
  
  <ul>
  <li><a href="https://github.com/ampproject/amphtml/issues/11133" rel="noreferrer">https://github.com/ampproject/amphtml/issues/11133</a></li>
  <li><a href="https://www.spacevatican.org/2015/4/7/on-mobile-safari-and-iframes/" rel="noreferrer">https://www.spacevatican.org/2015/4/7/on-mobile-safari-and-iframes/</a></li>
  <li><a href="https://stackoverflow.com/questions/23060281/external-html-file-in-bootstrap-popover-content">External HTML file in Bootstrap Popover content</a></li>
  <li><a href="https://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari">How to get an IFrame to be responsive in iOS Safari?</a></li>
  <li><a href="https://stackoverflow.com/questions/24157940/iframe-height-auto-css">iFrame Height Auto (CSS)</a></li>
  <li><a href="https://stackoverflow.com/questions/9975810/make-iframe-automatically-adjust-height-according-to-the-contents-without-using">Make iframe automatically adjust height according to the contents without using scrollbar?</a></li>
  <li><a href="https://stackoverflow.com/questions/26046373/iframe-scrolling-ios-8">Iframe scrolling iOS 8</a></li>
  <li><a href="https://stackoverflow.com/questions/26738764/ios8-safari-webkit-overflow-scrolling-touch-issue/26743685#26743685">iOS8 Safari -webkit-overflow-scrolling: touch; issue</a></li>
  </ul>
  
  <p>My workaround is posted in answer.</p>