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

Question

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

如何重现：

• 打开一个高于窗口高度的模态（在iPhone中）
• 聚焦输入字段
• 按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 - 如果你触摸输入字段，iPhone上的长形式的Bootstrap 3模式不会滚动

他还补充说：

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

但是这并没有将滚动条修复回顶部问题并使滚动出现故障，所以我也把它放回去了：

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

希望这可以帮助。 如果您找到解决所有问题的解决方案，请告诉我...... :)

Answer 3

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

// results is a div holding the results. 
// As soon as the search returns and the results are 
// added (even before the keyboard is gone) i run the 
// code below and once the keyboard is gone things scroll 
// properly. It's basically a hack to get the browser to 
// recalculate positioning and rendering. class 'absolute'
// just sets the position to absolute from it's default 'relative'.

results.addClass('absolute');
// Force browser to assume there's upcoming rendering to do
results.element.clientHeight;
// remove class
results.removeClass('absolute');

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