37

在Mobile Safari iOS 6.1.2上会发生以下情况

重现步骤

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

实际结果

  1. 输入 - 不集中

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

  2. 以输入为中心

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

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

预期结果

固定元素的位置始终受到尊重。

修复或解决方法？

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

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

4

3 回答 3

8

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

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

如果您使用的是 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;
}
于 2013-11-25T23:48:45.413 回答
1

Position:Fixed 有很多众所周知的bug，你可以在这里查看它们：Remysharp 文章。可能您仍然可以使用以下问题的答案修复其中一些问题：CSS“位置：固定；” 进入 iPad/iPhone？

祝你好运！

于 2013-05-16T03:25:03.390 回答
0

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

不要问我为什么会这样，只是太多小时的反复试验！

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

于 2013-06-27T23:58:17.573 回答