CODEWITHSUNDEEP
htmlioscssiframe
scopeak
scopeak

Reputation: 545

iframe iOS problems with src element 100vh

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!

Upvotes: 4

Views: 1360

Answers (1)

Renato
Renato

Reputation: 31

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

Upvotes: 0

Related Questions