title: IFrame height issues on iOS (mobile safari)
body: <p>Example page source:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
      &lt;title&gt;Page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="main" style="height: 100%;"&gt;
      &lt;div class="header" style="height: 100px; background-color: green;"&gt;&lt;/div&gt;
  
      &lt;iframe src="http://www.wikipedia.com"
              style="height: 200px; width: 100%; border: none;"&gt;&lt;/iframe&gt;
  
      &lt;div class="footer" style="height: 100px; background-color: green;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is, that <code>height</code> of <code>200px</code> from the IFrames inline style is ignored on mobile safari:</p>
  
  <p><a href="https://i.stack.imgur.com/prSh3.png"><img src="https://i.stack.imgur.com/prSh3.png" alt="enter image description here"></a></p>
  
  <p>Also I'd like to change the height of the IFrame dynamically via vanilla JavaScript which is not working at all with the following code:</p>
  
  <pre><code>document.getElementsByTagName('iframe')[0].style.height = "100px"
  </code></pre>
  
  <p>The value of the <code>height</code> style is changed correctly according to the dev tools but it's simply ignored since the actually rendered height of the IFrame doesn't change.</p>
  
  <p>This only seems to be a problem in mobile Safari and is working as expected on the latest versions of desktop Safari, Firefox, Chrome, Androids WebView etc.</p>
  
  <p>Testpage: <a href="http://devpublic.blob.core.windows.net/scriptstest/index.html">http://devpublic.blob.core.windows.net/scriptstest/index.html</a></p>
  
  <p><em>Ps.:</em> I tested this with various devices on browserstack and also took the screenshots there since I don't have no actual iDevice at hand.</p>