使用iframe嵌入式网站中的iOS滚动问题

Question

我在iOS(Safari)上遇到iframe问题.

我们通过iframe在我们的网页中使用了一个网页 - 它在PC和Android上看起来很棒,但在iOS上整个视图都被破坏了,我无法让可滚动的iframe在iOS上运行.

我们过去常常在iframe本身(在div中)修复iOS滚动问题:

   overflow: auto;
   -webkit-overflow-scrolling: touch;
   position: fixed;

不幸的是,这不再适用,所以我们把它拿出来了.这就是iframe现在的样子:

    <div class="nobottommargin">

            <p><iframe style="height: 500px; width: 100%; border: none; top: 0; left: 0;" src="https://url.com" scrolling="yes" allowfullscreen="yes" width="320" height="240"></iframe></p>
    </div>

关于如何解决这个问题或者可以在这里使用其他替代方案的任何想法？

编辑:我也尝试过,没有任何成功:

• touch-action: auto 在iframe标签上
• scrolling="no" 在iframe标签上
• pointer-events: none

编辑2:滚动现在正在工作但是向下滚动时,它正在中间切断我的iframe.仅在iOS上发行(在Android和PC上看起来很好).

这是我使用的iframe裁剪错误的工作iOS滚动代码:

<div class="scroll-container scroll-ios" style="height:500px;width: 100%; position:relative">
    <div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;min-width:50%;min-height:50%;max-height:500%;top:0;left:0;-webkit-overflow-scrolling: touch !important;overflow-y:scroll !important">
            <iframe id="iframe_test" src="url.com" style="height: 100%; width:100%;min-width:100%;" name="myiFrameFix" allowfullscreen="yes" scrolling="yes">   </iframe>
    </div>
</div>

编辑3:我也尝试过,删除所有使用GPU欺骗浏览器的CSS:

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

不幸的是,这并没有解决iframe iOS错误(尝试使用iOS 9和11).

编辑4:尝试用脚本修复iframe裁剪问题,使iframe的高度与整个身体相同.再一次,我没有成功.

<script>
    $(function() {
        var iframe = $("#iframe_test");    
        iframe.load(function() {
            $("body").height(iframe.height());
        });
    });
</script>

Answer 1

在您的 iPhone 上检查一下，滚动效果是否流畅。

.nobottommargin {
  width: 500px;
  height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
iframe {
  height: 100%;
  width: 100%;
  border: none;
  display: block;
}

<div class="nobottommargin">
  <iframe src="http://www.weather.gov/" frameborder="0">
</iframe>
</div>