带有 iframe 的引导模式仅在 iPhone 上不允许垂直滚动答案

【问题标题】：Bootstrap modal with iframe not allowing vertical scrolling on iPhone only带有 iframe 的引导模式仅在 iPhone 上不允许垂直滚动
【发布时间】：2018-10-11 10:07:46
【问题描述】：

我是带有 iFrame 的页面上的引导模式，其形式在一个很大的 iframe 中。我无法滚动此表格在 iPhone 浏览器上垂直。我在android手机上交叉检查了相同的内容，并且可以向下滚动。但是用iphone 好像有问题。

不知道是什么问题

<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog model-bookingform" role="document">
    <div class="modal-content">
      <div class="modal-header text-center" style="position:absolute; right:0px; z-index:999; padding:0px;">
        @*<h4 class="modal-title w-100 font-weight-bold">Form</h4>*@
        <button type="button" class="close btn-model-close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="embed-responsive embed-responsive-16by9 z-depth-1-half bookingformiframe-w">
        <iframe id="iframex" class="embed-responsive-item" style="overflow:auto;" src="https://example.com/largeform"></iframe>
      </div>
    </div>
  </div>
</div>

CSS

我什至在没有解决方案的情况下添加了额外的 css，当我尝试滚动而不是滚动 iframe 内容时，它似乎滚动页面

@media (max-width:800px) {
  #modalLoginForm {
    overflow: scroll;
    z-index: 999999 !important;
  }

  iframex {
    overflow: scroll !important;
    z-index: 9999999 !important;
  }
}

.modal {
  overflow-y: auto !important;
}

.modal-open .modal {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

【问题讨论】：

标签： css twitter-bootstrap-3 vertical-scrolling

【解决方案1】：

这可能是 Safari 滚动问题。尝试将-webkit-overflow-scrolling: touch; 属性添加到 iframe 的包装器中，如下所示：

.embed-responsive {
  -webkit-overflow-scrolling: touch;
}

希望有帮助

【讨论】：

我在它不起作用之前尝试过这个？，我花了好几个小时才让这个工作没有运气
请在 iframe 标签上试试这个：<iframe id="iframex" class="embed-responsive-item" style="position:absolute; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;" src="https://example.com/largeform"></iframe>

【解决方案2】：

作为一个临时修复工作，问题似乎只在 iPhone 上，因为它在其他移动设备上也能正常工作

.embed-responsive-16by9 {
    padding-bottom: 0% !important;
    height:1100px !important;
}

【讨论】：