在iOS Safari中输入焦点后，模态（固定元素）不可滚动

Question

我现在花了大约8个小时尝试解决这个问题，感谢任何帮助！

如何重现：

• 打开一个高于窗口高度的模式（在iPhone中）
• 关注输入字段
• 按＆＃34;完成＆＃34;在iOS键盘上

您无法再滚动到模态的底部

jsbin： https://jsbin.com/hagiyojufu （https://jsbin.com/hagiyojufu/1/edit?html,css,js,output）

Answer 1

添加此css代码：

html, body {
 overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

Answer 2

将此添加到bootstrap.css中的.modal-open（溢出：隐藏; - 已经存在于我的内容中。）

.modal-open {
  position: fixed;
  overflow: hidden;
  left:0;
  right:0;
}

这是我正在使用的临时解决方案。它使滚动再次起作用，但是当模态关闭时，主页面将滚动回到顶部。之前更好，但不是真正的解决方案。我得到了解决方案： @Eru Penkman - Bootstrap 3 modal with long form on iPhone doesn't scroll if you touch input field

他还补充道：

.modal{
  -webkit-overflow-scrolling: auto;
}

但是，这并没有解决 滚动到顶部 问题并导致滚动故障，所以我也把它放回去了：

.modal{
  -webkit-overflow-scrolling: touch;
}

希望这会有所帮助。如果您找到解决所有问题的解决方案，请告诉我......：）

Answer 3

超级老线程，但我刚遇到这个问题，所以这是我的解决方案。我有javascript中引用的所有元素。当用户键入输入时，将填充搜索结果列表。添加这些结果，结合键盘打开时移动物体的iOS行为导致错误，一旦键盘消失，持有输入和div的容器就不能滚动。

3,5,7

无论它在哪个元素上完成，结果容器或父元素，它似乎都有效，它也可能适用于该层次结构中的其他元素。