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

Question

以下发生在 Mobile Safari iOS 6.1.2

重现步骤

创建一个 position: fixed带有 <input type="text"> 的元素里面的元素。

实际结果

1. 输入 - 不专注

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

   

2. 以输入为中心

   当输入获得焦点时，浏览器进入一种特殊模式，在该模式下它不再更新固定元素的位置(任何固定定位元素，而不仅仅是输入的父元素)并向下移动整个视口(viewport)以便使输入的父元素位于屏幕中央。

   查看现场演示: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;
}