iOS输入焦点在固定父元素内时，会停止固定元素位置的更新。

Question

iOS输入焦点在固定父元素内时，会停止固定元素位置的更新。

ioscssinputfocusfixed

37

以下内容发生在iOS 6.1.2的Mobile Safari上。 复现步骤： 创建一个包含<input type="text">元素的position: fixed元素。 实际结果：

未聚焦输入框

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

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

查看实时演示：http://jsbin.com/oqamad/1/

期望结果

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

修复或解决方法？

如果有任何线索可以强制Safari正确显示固定元素，那将非常有帮助。

我希望有一种不需要使用position: absolute和设置一个onscroll事件处理程序的解决方法。

- Valentin Agachi

1

Remy Sharp在2012年5月针对iOS 5制作了一个现场演示该错误的视频：http://www.youtube.com/watch?v=lrnvZDwgJRc - Valentin Agachi

目前来看，这是一个无法修复的错误。固定定位在移动设备中正开始获得更多预期的支持。 - okcoker

你可以使用 JavaScript 将 div 对齐到页面底部。这就是我为我的页脚所做的。设置一个超时函数或在滚动事件上调用重新定位函数。 - Shouvik

5

两年后，这个问题仍然存在……Safari iOS，卧槽？ - Adrian Florescu

可能是几个SO问题的重复。请参见https://gist.github.com/avesus/957889b4941239490c6c441adbe32398#gistcomment-2193547获取详细信息。 - Brian Cannard

@ValentinAgachi，我也有同样的问题，你得到了任何答案吗？https://stackoverflow.com/questions/48662128/input-focused-inside-fixed-element-is-changing-the-position-of-the-element-in-io - Ganesh Putta

3个回答

1

固定定位存在许多众所周知的错误，您可以在此处检查它们: Remysharp文章。也许您仍然可以使用此问题的答案修复其中的一些问题：将CSS“position:fixed;”应用于iPad / iPhone？

祝你好运！

- JP Illanes

0

是的，这个问题只发生在iOS Safari上，从版本5开始。如果你在iOS上使用Chrome，你会发现它可以正常工作。我用来修复这个问题的方法是在body上创建并添加一个样式元素，然后将其删除，然后对元素执行focus操作。

别问我为什么这样能解决问题，就是试错了太多小时！

我还注意到，在第一次修复之后，对于后续的固定定位元素，你不必再执行这个样式技巧。

- Richard Lailey

你能提供一个代码示例吗，这样我们就可以投票支持它是否有效？谢谢。 - Ivan Durst

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alessandro Incarnati · Accepted Answer

这是Safari上普遍存在的一个bug，无论是在iPad还是iPhone上。

解决方法是将所有设置为fixed position的元素位置改为absolute。

如果您正在使用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”添加到body时，我可以将所有具有固定位置的元素的位置更改为absolute。

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