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

Position:Fixed 有很多众所周知的错误，您可以在这里查看它们：Remysharp 文章。也许您仍然可以使用此问题的答案来修复其中一些问题：CSS \xe2\x80\x9cposition：fixed;\xe2\x80\x9d into iPad/iPhone?

\n\n

祝你好运！

\n