HTML文本输入在iPhone 6/7 plus上打破了定位(HTML text input breaks positioning on Iphone 6/7 plus)

HTML文本输入在iPhone 6/7 plus上打破了定位(HTML text input breaks positioning on Iphone 6/7 plus)

我试图找到一些移动Safari浏览器错误的解决方法：

例如，我有一个明确的HTML页面

视口设置width =设备宽度，noscalable 身体与位置：固定 由js创建并置于屏幕中心的两个HTMLInputs

所有工作都很好，但是在iPhone 6 plus和7 plus上我们遇到了一个很大的问题：

如果我已经集中输入然后隐藏键盘，所有的窗口定位都会脱离渲染的位置。 如果我点击了可见位置的〜100px，输入只能关注。 此外，页面上的每个附加元素（甚至包含具有webgl内容的画布）也会在每个水龙头/触摸开关上出现错误的坐标，等等。

我已经连接iPhone进行调试，并且我可以看到浏览器认为输入不是放置在渲染的位置。 此外，我可以用手指垂直滚动页面，并且实际渲染的输入将保留在原地，但浏览器的区域会上下移动直至渲染的位置。

只有在横向浏览器中打开少量选项卡（我会在屏幕截图中突出显示选项卡红色）时才能复制错误。

无法在iphones5-6上进行转载，因为没有标签，但也无法在ipad上转载，其中有相同的标签。

示例如下： http : //baker-feather-16713.bitballoon.com/

I try to find some workarounds for mobile safari bug:

For example I have a clear html page with

Viewport settings width=device-width, noscalable Body with position:fixed Two HTMLInputs created by js and placed to center of screen

All works fine on ever devices but on Iphones 6 plus and 7 plus we have a great problem:

If I've focus input and then hide keyboard, all window positioning become diverged from rendered position. Input could be only focused if I've click ~100px higher of it visible position. Moreover, each additional elements on page (even canvas with webgl content) also will get wrong coordinates on each tap/touchstart and so on.

I've connect iphone for debug, and I can see that browser thinks that input placed not where it rendered. Also i can vertically scroll page with finger, and real rendered inputs will stay in place, but area from browser will moves up and down right up to his rendered position.

Bug could be reproduced only if few tabs opened in browser in landscape orientation (i'll highlight tabs red on screenshot).

Can't reproduced on iphones5-6, because there is no tabs, but also can't be reproduced on ipad, which has the same tabs.

Example is here: http://baker-feather-16713.bitballoon.com/

最满意答案

问题是Safari浏览器允许用户将页面滚动到全屏，如果您将html / body width和height设置为100％。 所以，当键盘显示内容向上滚动时，尽管该主体的位置“固定”，并且在键盘变为隐藏时呈现出错误。

解决方案非常简单：只需要​​在键盘隐藏时执行scrollTo（0，0），例如：

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

Problem is the fact that safari allow user to scroll page to fullscreen ever if you set html/body width and height to 100%. So, when keyboard showed content scrolls up despite that body has position "fixed" and it rendered with bug when keyboard becomes hidden.

Solution is very simple: just need to do scrollTo(0, 0) when keyboard hidden, e.g.:

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