HTML 文本输入会破坏 Iphone 6/7 plus 上的定位

Posted 2023-03-11

【中文标题】HTML 文本输入会破坏 Iphone 6/7 plus 上的定位

【英文标题】：HTML text input breaks positioning on Iphone 6/7 plus

【发布时间】：2017-03-17 12:20:31

【问题描述】：

我尝试找到一些解决移动 safari 错误的方法：

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

视口设置宽度=设备宽度，不可缩放 具有位置的主体：固定 由 js 创建并放置在屏幕中心的两个 HTMLInputs

在任何设备上都可以正常工作，但在 Iphone 6 plus 和 7 plus 上我们遇到了一个大问题：

如果我聚焦输入然后隐藏键盘，所有窗口定位都会偏离渲染位置。仅当我单击高于可见位置约 100 像素时，输入才能被聚焦。此外，页面上的每个附加元素（即使是带有 webgl 内容的画布）也会在每次点击/触摸开始时得到错误的坐标等等。

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

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

不能在iphone5-6上复制，因为没有标签，在ipad上也不能复制，有相同的标签。

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

【参考方案1】：

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

解决方法很简单：只需要​​在键盘隐藏的时候做scrollTo(0, 0)，例如：

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