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

Question

我是带有iFrame的页面上的引导模式，表单在较大的iframe中。我无法滚动此表单 垂直在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;
}

Answer 1

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

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

希望这个帮助

Answer 2

由于以下临时修复程序有效，问题似乎仅与iPhone有关，因为它在其他移动设备上工作正常

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