iOSinput集中在固定父节点位置更新的固定元素

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

重现步骤

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

实际结果

1. 投入 – 不重点

   input未聚焦时，固定元素的位置是正确的。

   

2. 以投入为重点

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

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

   

预期结果

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

修复或解决方法？

任何线索如何强制Safari来正确显示固定的元素将是有帮助的。

我宁愿一个解决方法，不涉及使用position: absolute和设置onscroll事件处理程序。

Answer 1

这是一个众所周知的在Safari和iPad上的bug。

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

如果您使用的是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

位置：固定有很多众所周知的错误，你可以在这里查看： Remysharp文章 。 可能你仍然可以用这个问题的答案解决其中的一些问题： CSS“position：fixed;”到iPad / iPhone中？

祝你好运！

Answer 3

是的，这是自v5以来特别是iOS Safari的问题。 如果你在iOS上使用Chrome，你会注意到它可以正常工作。 我用来解决这个问题是创build并添加一个样式元素的身体，随后删除它，然后执行该元素的焦点。

不要问我为什么这个工作，只是太多的反复试验！

我也注意到，在第一次固定之后，你不必为随后的固定位置元素执行样式技巧