iframe iOS problems with src element 100vh
<p>I have an iframe that is outputting a website. The src website uses a large hero with 100vh to calculate height. Everything works great apart from on iOS devices when inside the iframe. It seems the 100vh of the hero is stretching the full height of the iframe page over other elements rather than only the current viewport. </p>

<p>HTML</p>

<pre><code>&lt;div class="wrapper"&gt;
    &lt;iframe src="[website url]"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code> .wrapper{
    height: 100%;
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    }


.wrapper iframe{
  display: block;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0 none;
  box-sizing: border-box;
}

body { margin:0 }
</code></pre>

<p>The problem is that on iOS, the hero section from the src website will stretch the entire height of the iframe</p>

<p>HTML</p>

<pre><code>&lt;section class="hero"&gt;
&lt;/section&gt;
</code></pre>

<p>CSS</p>

<pre><code>background-size: cover !important;
background-position: center center !important;
position: relative;
height: 100vh;
</code></pre>

<p>The problem only seems to exist in iOS, it's fine on every other device.</p>

<p>Any help would be great!</p>