固定位置div冻结页面（iPad） [英] fixed position div freezes on page (iPad)

问题描述

我正在构建一个asp.net网站，以便在ipad上得到支持。当我专注于输入元素并且键盘弹出时，位置固定标题div（通常与页面一起滚动）将弹出页面相当于键盘占用量的距离并在那里冻结持续时间。输入过程。一旦键盘退回，div就会重新锁定到位并再次正常运行。我在iOS5上测试所以位置：应该支持fixed。

I have an asp.net web site I am building to be supported on ipad. When I focus on an input element and the keyboard pops up, the position fixed header div(which normally scrolls along with the page) will pop up the page a distance equivalent to the amount the keyboard takes up and freeze there for the duration of the input process. Once the keyboard is dropped back down, the div snaps back into place and behaves normally again. I am testing on iOS5 so position: fixed should be supported.

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

Is this a known issue? Has someone come across this and dealt with it before? I can't seem to find anything on this.

推荐答案

iOS5 / iOS6 / iOS7上的固定定位已被破坏。

Fixed positioning is broken on iOS5/iOS6/iOS7.

编辑3：查看iOS8答案结尾附近的工作修补程序的链接。

Edit 3: See link to a working fix near end of this answer for iOS8.

位置：固定被破坏时要么：

Position:fixed is broken when either:

a）页面被缩放

或

b）键盘显示在iPad / iPhone上（由于输入得到关注）。

b) the keyboard shows on the iPad/iPhone (due to an input getting focus).

您可以在 jsbin.com/icibaz/3 打开链接和缩放，或给出输入焦点。您可以自己编辑编辑HTML 。

You can view the bugs yourself in jsbin.com/icibaz/3 by opening the link and zooming, or giving the input focus. You can edit the edit the html yourself.

关于错误（a）和（b）的注释：

Notes about bugs (a) and (b):

1. 带的固定div顶部：0px;当输入变焦并且键盘显示时，左：0px; 将显示在错误的位置（屏幕顶部上方或下方）。

1. A fixed div with top: 0px; left: 0px; will show in the wrong position (above or below the top of the screen) when an input gets focus and the keyboard shows.

问题似乎与屏幕上输入的自动居中有关（更改window.pageYOffset）。

The problem seems to have something to do with the auto-centering of the input on the screen (changing window.pageYOffset).

这似乎是计算错误，而不是重绘错误：如果你强制顶部：要在onScroll事件上进行更改（例如，在0px和1px之间切换），您可以看到固定div按像素移动，但它仍然位于错误的位置。

It appears to be a calculation fault, and not a redraw fault: if you force the top: to change (e.g. switching between 0px and 1px) on the onScroll event, you can see the fixed div move by a pixel, but it remains in the wrong place.

我之前使用的一个解决方案是当输入获得焦点时隐藏固定的div - 请参阅我写的另一个答案。

One solution I used previously is to hide the fixed div when an input gets focus - see the other Answer I wrote.

固定div似乎卡在键盘打开时页面上的绝对位置。

The fixed div seems to becomes stuck at the same absolute position on the page it was at at the time when the keyboard opened.

所以也许当输入具有焦点时，将div更改为绝对定位？编辑3：使用此解决方案查看底部的评论。或者也许在打开键盘之前保存pageXOffset / pageYOffset值，并在onScroll事件中计算这些值与当前pageXOffset / pageYOffset值之间的差异（键盘打开后的当前值），并将固定的div偏移该差值。

So perhaps change the div to absolute positioning when an input has focus? Edit 3: see comment at bottom using this solution. Or perhaps save the pageXOffset/pageYOffset values before the keyboard is opened, and in an onScroll event calculate the difference between those values and the current pageXOffset/pageYOffset values (current once the keyboard is opened), and offset the fixed div by that difference.

如果页面被缩放，固定定位似乎有一个不同的问题 - 尝试这里（也是一个很好的信息这里关于在评论中修复的Android支持。）

There appears to be a different problem with fixed positioning if the page is zoomed - try it here (Also good information here about Android support for fixed in comments).

编辑1：重现使用jsbin（不是jsfiddle）并使用jsbin的全屏视图（不是编辑页面）。避免使用jsfiddle（并编辑jsbin视图），因为它们将代码放在iframe中，导致干扰固定定位和pageYOffset。

Edit 1: To reproduce use jsbin (not jsfiddle) and use the fullscreen view of jsbin (not the edit page). Avoid jsfiddle (and edit view of jsbin) because they put the code inside an iframe which causes interference with fixed positioning and pageYOffset.

编辑2：iOS 6和iOS 7 Mobile Safari position：fixed; 仍然存在相同的问题 - 大概是按设计进行的！。

Edit 2: iOS 6 and iOS 7 Mobile Safari position:fixed; still has the same issues - presumably they are by design!.

编辑3：A （b）的工作解决方案是当输入获得焦点时，将标题更改为绝对定位，然后在页面滚动事件上设置标题顶部例如。此解决方案：

Edit 3: A working solution for (b) is when the input get focus, change the header to absolute positioning and then set the header top on the page scroll event for example. This solution:

• 当输入未聚焦时使用固定定位（使用window.onscroll具有可怕的抖动）。


• 不允许双指缩放（避免上面的错误（a））。


• 一旦输入获得焦点（使标题正确定位），使用绝对定位和window.pageYOffset。


• 如果在输入具有焦点时滚动，请将style.top设置为等于pageYOffset（由于onscroll事件延迟，标题将稍微抖动，即使在iOS8上也是如此）。


• 如果在iOS8上的应用程序中使用UIWebView，或者使用< = iOS7，如果在输入有焦点时滚动，则标题会超级抖动，因为在滚动完成之前不会触发onscroll。


• 输入失去焦点后返回固定位置标题（示例使用input.onblur，但可能是tider使用
  document.body.onfocus）。


• 注意可用性失败，如果标题太大，输入可能被遮挡/覆盖。


• 由于iOS页面/视口高度中的错误，我无法使用页脚工作当键盘显示时。


• 使用 http://jsbin.com/xujofoze/编辑示例4 /编辑并使用 http://output.jsbin.com/xujofoze/查看4 /安静

• Uses fixed positioning when input not focused (using window.onscroll has terrible jitter).
• Don't allow pinch-zoom (avoid bug (a) above).
• Uses absolute positioning and window.pageYOffset once an input gets focus (so header is correctly positioned).
• If scrolled while input has focus, set style.top to equal pageYOffset (header will jitter somewhat due to onscroll event delay even on iOS8).
• If using UIWebView within an App on iOS8, or using <=iOS7, if scrolling when input has focus, header will be super jittery because onscroll is not fired till scroll finishes.
• Go back to fixed position header once input loses focus (Example uses input.onblur, but probably tider to use document.body.onfocus).
• Beware usability fail that if header too large, the input can be occluded/covered.
• I couldn't get to work for a footer due to bugs in iOS page/viewport height when the keyboard is showing.
• Edit example using http://jsbin.com/xujofoze/4/edit and view using http://output.jsbin.com/xujofoze/4/quiet

这篇关于固定位置div冻结页面（iPad）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！