带有 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>

Answer 2

可能值得在媒体查询中包含一些外部 JavaScript 来解决此问题，目前它已应用于每个显示。

Answer 3

解决这个问题。您需要在 iframe 上专门设置高度。

    .wrapper {
      -webkit-overflow-scrolling: touch;
    }
    <div class="wrapper">
      <iframe
        style="height: 500px"
      ></iframe>
    </div>

最难的部分是获取 iframe 的内容高度。如果您拥有 iframe，则可以使用 window.postMessage 让 iframe 告诉父页面。否则你需要定期检查高度，直到你认为它是固定的。

var iframe = document.querySelector('iframe');
var setHeight = function(height) {
  iframe.style.height = height + 'px';
};
var getHeight = function() {
  return iframe.getRootNode().body.scrollHeight;
};
var prevHeight = 0;
var adjustHeight = function() {
  var height = getHeight();
  if (prevHeight !== height) {
    prevHeight = height;
    setTimeout(adjustHeight, 2000);
  } else {
    setHeight(height);
  }
};
setTimeout(adjustHeight, 2000);

Answer 4

我遇到这个问题已经有一段时间了，终于找到了一个对我有用的修复方法，它可以减小 iframe 中消失的 div 的宽度。我的是 100%，减少到 95% 解决了它。我不确定以 px 为单位的实际最大宽度，但我认为它必须小于屏幕的宽度。我尝试了你提到的所有 css 技巧等等，但这是唯一有效的方法。