Question

我有一个输出网站的iframe。 src网站使用100vh的大英雄来计算身高。除了在iframe内部的iOS设备上，一切都很好。似乎100vh的英雄正在拉伸iframe页面的整个高度而不是其他元素，而不仅仅是当前的视口。

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 }

问题是在iOS上，src网站的英雄部分将拉伸iframe的整个高度

HTML

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

CSS

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

问题似乎只存在于iOS中，在其他任何设备上都很好。

任何帮助都会很棒！

Answer 1

据我所知，Safari在iOS 6 - 7渲染元素上有问题，这些元素的高度为：在CSS中设置为100vh。

ifrc iOS问题src元素100vh

1 个答案: