固定位置div冻结页面(iPad)

Question

我有一个我在ipad上支持的asp.net网站.当我专注于输入元素并弹出键盘时,位置固定标题div(通常与页面一起滚动)将弹出页面相当于键盘占用量的距离并在此处冻结输入过程.键盘向下拉后,div会重新锁定到位并再次正常运行.我在iOS5上测试所以位置:应该支持fixed.

这是一个已知的问题？有人遇到这个并在之前处理过吗？我似乎无法找到任何相关的东西.

Answer 1

iOS5/iOS6/iOS7上的固定定位被打破.

编辑3:请参阅iOS8此答案末尾附近的工作修订链接.

位置:固定在以下任何一个中断:

a)页面被缩放

要么

b)键盘显示在iPad/iPhone上(由于输入得到关注).

您可以通过打开链接和缩放或给出输入焦点来自行查看jsbin.com/icibaz/3中的错误.您可以自己编辑html编辑.

关于错误(a)和(b)的注释:

top: 0px; left: 0px;当输入获得焦点并且键盘显示时,固定的div 将显示在错误的位置(屏幕顶部的上方或下方).
这个问题似乎与屏幕上输入的自动居中有关(更改window.pageYOffset).
它似乎是一个计算错误,而不是重绘错误:如果强制top:改变(例如在0px和1px之间切换)onScroll事件,你可以看到固定div移动一个像素,但它仍然是错误的地点.
我之前使用的一个解决方案是在输入获得焦点时隐藏固定的div - 请参阅我写的另一个答案.
固定div似乎卡在键盘打开时页面上的绝对位置.
因此,当输入具有焦点时,或许可以将div更改为绝对定位？编辑3:使用此解决方案查看底部的评论.或者也许在打开键盘之前保存pageXOffset/pageYOffset值,并在onScroll事件中计算这些值与当前pageXOffset/pageYOffset值之间的差异(键盘打开后的当前值),并将固定的div偏移该差值.
似乎有如果页面被放大是一个不同的问题与固定定位-尝试在这里(也不错的信息在这里关于固定在评论支持Android).

编辑1:要重现使用jsbin(而不是jsfiddle)并使用jsbin的全屏视图(不是编辑页面).避免使用jsfiddle(并编辑jsbin视图),因为它们将代码放在iframe中,导致干扰固定定位和pageYOffset.

编辑2:iOS 6和iOS 7 Mobile Safari position:fixed;仍然存在相同的问题 - 大概是他们的设计!

编辑3:(b)的当输入获得焦点,报头更改为绝对定位,然后设置在页面滚动事件报头顶部的工作溶液例如.此解决方案:

当输入未聚焦时使用固定定位(使用window.onscroll具有可怕的抖动).
不要进行双指缩放(避免上面的bug(a)).
输入获得焦点后使用绝对定位和window.pageYOffset(因此标题正确定位).
如果在输入具有焦点时滚动,则将style.top设置为等于pageYOffset(即使在iOS8上,由于onscroll事件延迟,标题也会稍微抖动).
如果在iOS8上的应用程序中使用UIWebView,或者使用<= iOS7,如果在输入具有焦点时滚动,则标题将是超级抖动,因为在滚动完成之前不会触发onscroll.
输入失去焦点后返回固定位置标题(示例使用input.onblur,但可能是tider使用document.body.onfocus).
注意可用性失败,如果标题太大,输入可以被遮挡/覆盖.
由于键盘显示时iOS页面/视口高度存在错误,我无法为页脚工作.
使用http://jsbin.com/xujofoze/4/edit编辑示例并使用http://output.jsbin.com/xujofoze/4/quiet进行查看