javascript - HTML 文本输入打破了 Iphone 6/7 plus 上的定位

Question

我试图找到一些解决移动 safari bug 的方法:

例如我有一个清晰的html页面

1. 视口(viewport)设置 width=device-width, noscalable
2. 正文位置:固定
3. 两个由 js 创建并放置在屏幕中央的 HTMLInputs

在所有设备上一切正常，但在 Iphone 6 plus 和 7 plus 上我们遇到了一个大问题:

如果我获得焦点输入然后隐藏键盘，所有窗口定位都会偏离渲染位置。只有当我点击它可见位置高 ~100px 时，输入才会被聚焦。此外，页面上的每个附加元素(即使是带有 webgl 内容的 Canvas )也会在每次点击/触摸启动等时得到错误的坐标。

我已连接 iphone 进行调试，我可以看到浏览器认为输入不在它呈现的位置。我也可以用手指垂直滚动页面，真实的渲染输入将留在原地，但浏览器的区域将上下移动到他的渲染位置。

只有在浏览器中横向打开几个选项卡时才能重现错误(我将在屏幕截图中以红色突出显示选项卡)。

在iphones5-6上无法复现，因为没有tabs，在ipad上也无法复现，有相同的tabs。

示例在这里:http://baker-feather-16713.bitballoon.com/

Answer 1

问题是，如果您将 html/body 宽度和高度设置为 100%，safari 允许用户将页面滚动到全屏。因此，当键盘显示内容向上滚动时，尽管主体的位置是“固定的”，并且当键盘隐藏时它会呈现错误。

解决方案很简单:只需要​​在隐藏键盘时执行 scrollTo(0, 0) 即可，例如:

document.addEventListener('focusout', function(e) { window.scrollTo(0, 0) });