4

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.

HTML

<div class="wrapper">
    <iframe src="[website url]"></iframe>
</div>

CSS

 .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 }

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

HTML

<section class="hero">
</section>

CSS

background-size: cover !important;
background-position: center center !important;
position: relative;
height: 100vh;

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

Any help would be great!

scopeak
  • 545
  • 1
  • 5
  • 22

1 Answers1

0

For what I know Safari have problems on iOS 6 - 7 rendering elements that has height: 100vh set in CSS.

Renato
  • 31
  • 5
  • I am using iOS 9 and the issue is still here. Thanks though! – scopeak Feb 26 '16 at 17:01
  • 1
    It's a workaround but, you could via media query rule change the iframe properties to something like: `html, body {height:100%;}` `.wrapper iframe {position:absolute;top:0;left:0;width:100%; height:100%;}` via, [link]: http://stackoverflow.com/questions/23027068/how-to-set-the-iframe-height-width-to-100 – Renato Feb 26 '16 at 17:13
  • Still an issue 3 years later. When in an iframe on iOS, `vh` is not based off of the iframe's viewport height, but rather off of the height of all of the content inside of the iframe. This puts a major limitation on my use of `vh` and is a totally broken implementation of `vh` when embedded on iOS. – Skitterm Jul 26 '19 at 00:01