固定父节点内部的iOS输入停止固定元素的位置更新

Question

以下情况发生在Mobile 6.1.2上

复制的步骤

创建一个position: fixed元素，其中包含一个<input type="text">元素。

实际结果

1. 输入-非聚焦 当输入不集中时，固定元素的位置是正确的。

​

1. 输入焦点 当输入聚焦时，浏览器进入一种特殊模式，在该模式中，浏览器不再更新固定元素的位置(任何固定的定位元素，而不仅仅是输入的父元素)，并将整个视图向下移动，以便使输入的父元素位于屏幕的中心。 参见现场演示：http://jsbin.com/oqamad/1/

​

预期结果

固定元素的位置总是被尊重的。

修复还是解决方法？

任何关于如何强制Safari正确显示固定元素的线索都是有帮助的。

我更喜欢不涉及使用position: absolute和设置onscroll事件处理程序的解决方案。

Answer 1

这是Safari上一个众所周知的bug，无论是在iPad还是iPhone上。

一种解决办法是将位置更改为绝对到所有固定位置设置的元素。

如果您使用的是现代化，您也可以这样瞄准移动设备：

jQuery代码

$(document).ready(function() {

  if (Modernizr.touch) {

      $(document)

        .on('focus', 'input', function(e) {
            $('body').addClass('fixfixed');
        })

        .on('blur', 'input', function(e) {
            $('body').removeClass('fixfixed');
        });

      }

});

CSS

如果我只想瞄准标头和页脚--例如用固定位置设置的页眉和页脚--那么，当类‘fixed’被添加到主体时，我可以将这个位置更改为绝对到所有具有固定位置的元素。

.fixfixed header, .fixfixed footer {
  position: absolute;
}

Answer 2

职位:修正了很多众所周知的错误，你可以在这里检查它们：雷米夏普文章。也许您仍然可以使用以下问题的答案来修复其中的一些问题：CSS定位:固定；进入iPad/iPhone？

祝好运!

Answer 3

是的，这是iOS自v5以来的一个特别的狩猎问题。如果你在iOS上使用Chrome，你会发现它会正常工作。我用来修复这个问题的工具是创建一个样式元素并将其添加到主体中，然后删除它，然后对元素执行焦点。

不要问我这是为什么，只是太多小时的尝试和错误！

我还注意到，在第一次修复之后，您不必为后续的固定定位元素执行样式技巧