iOS输入集中在固定父级停止位置更新固定元素

Question

以下内容发生在 Mobile Safari iOS 6.1.2

上

重现的步骤

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

实际结果

1. 输入 - 未集中

   当输入未聚焦时，固定元素的位置是正确的。

   

2. 以投入为重点

   当输入被聚焦时，浏览器进入一种特殊模式，它不再更新固定元素的位置（任何固定的元素，而不仅仅是输入的父元素）并移动整个视口向下以使输入的父元素位于屏幕的中心。

   查看现场演示：http://jsbin.com/oqamad/1/

   

预期结果

始终遵守固定元素的位置。

修复或解决方法？

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

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

Answer 1

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

解决方法是将位置更改为使用固定位置设置的所有元素的绝对位置。

如果您使用的是Modernizr，您也可以通过以下方式定位移动设备：

---

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

---

如果我想仅以页眉和页脚为目标，使用固定位置设置，当类'fixfixed'添加到主体时，我可以将位置更改为具有固定位置的所有元素的绝对位置。

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

Answer 2

位置：已修复有很多众所周知的错误，您可以在此处查看：Remysharp article。可能你仍然可以使用这个问题的答案修复其中一些：CSS “position: fixed;” into iPad/iPhone?

祝你好运！

Answer 3

是的，这是自v5以来的iOS游侠问题。如果你在iOS上使用Chrome，你会发现它可以正常工作。我用来解决这个问题的方法是创建一个样式元素并将其添加到主体中，然后将其删除，然后对元素执行焦点。

不要问我为什么这样做，只是试了太多小时！

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