iOS的输入聚焦固定母体内停止固定元件的位置更新(iOS input focused inside

下面发生在移动Safari浏览器的iOS 6.1.2

重现步骤

创建一个position: fixed与元素<input type="text">元件里面。

实际结果

输入-不集中
当输入不集中在固定元件的位置是正确的。
输入-重点
当输入被聚焦时，浏览器进入其中它不更新所述固定元件的任何更多的（任何固定定位的元素，不只是输入的父）的位置的特殊模式，并且为了使输入的向下移动整个视口父元素坐在屏幕的中心。
见现场演示： 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;
}

Answer 2:

位置：固定有很多众所周知的臭虫，你可以在这里检查他们： Remysharp文章。：也许你可以使用从解答这个问题还是解决其中一些为iPad / iPhone的;：CSS“定位”？

祝好运！

Answer 3:

是的，这是专门因为V5在iOS Safari的问题。如果您在iOS上使用Chrome，你会发现它会工作确定。我用它来解决这个问题的bodge是创建和样式元素添加到人体，并随后将其删除，然后执行焦点的元素上。

不要问我为什么这个工作，只是试错的太多时间！

我也注意到，这是固定后的第一时间，你不必进行后续固定定位元素的风格技巧

文章来源: iOS input focused inside fixed parent stops position update of fixed elements