聚焦在固定父级内的 iOS 输入停止固定元素的位置更新 [英] iOS input focused inside fixed parent stops position update of fixed elements

问题描述

以下发生在 Mobile Safari iOS 6.1.2

重现步骤

创建一个 position: fixed 元素，其中包含一个 元素.

Create a position: fixed element with an <input type="text"> element inside it.

实际结果

1. 输入 - 未聚焦

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

The position of the fixed elements is correct when input is not focused.

输入 - 重点

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

When the input is focused, the browser enters a special mode in which it does not update the position of the fixed elements any more (any fixed positioned element, not just the input's parent) and moves the whole viewport down in order to make the input's parent element sit in the center of the screen.

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

预期结果

始终尊重固定元素的位置.

The position of the fixed elements is always respected.

修复或解决方法?

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

Any clues as how to force Safari to properly display the fixed elements would be helpful.

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

I would prefer a workaround which does not involve using position: absolute and setting an onscroll event handler.

推荐答案

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

It's a well known bug on Safari, both on iPad and iPhone.

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

A workaround it's to change the position to absolute to all elements set with fixed position.

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

In case you are using Modernizr you could also target mobile devices this way:

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"类添加到正文时，我可以将所有具有固定位置的元素的位置更改为绝对位置.

If I want to target just the header and footer for example, that are set with fixed position, when the class 'fixfixed' is added to the body I can change the position to absolute to all elements with fixed position.

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

这篇关于聚焦在固定父级内的 iOS 输入停止固定元素的位置更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！