CSS 聚焦在固定父级内的 iOS 输入停止固定元素的位置更新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15199072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS input focused inside fixed parent stops position update of fixed elements
提问by Valentin Agachi
The following happens on Mobile Safari iOS 6.1.2
以下发生在Mobile Safari iOS 6.1.2 上
Steps to reproduce
重现步骤
Create a position: fixedelement with an <input type="text">element inside it.
创建一个position: fixed元素，其中包含一个<input type="text">元素。
Actual result
实际结果
Input - not focused
The position of the fixed elements is correct when input is not focused.
Input - focused
When the input is focused, the browser enters a special mode in which it does not update the position of the fixed elements any more (any fixed positioned element, not just the input's parent) and moves the whole viewport down in order to make the input's parent element sit in the center of the screen.
See live demo: http://jsbin.com/oqamad/1/
输入 - 未聚焦
当输入未聚焦时，固定元素的位置是正确的。
输入 - 重点
当输入被聚焦时，浏览器进入一种特殊模式，在这种模式下它不再更新固定元素的位置（任何固定定位的元素，而不仅仅是输入的父元素）并向下移动整个视口以使输入的父元素位于屏幕中央。
看现场演示：http: //jsbin.com/oqamad/1/
Expected result
预期结果
The position of the fixed elements is always respected.
始终尊重固定元素的位置。
Fix or workaround?
修复或解决方法？
Any clues as how to force Safari to properly display the fixed elements would be helpful.
有关如何强制 Safari 正确显示固定元素的任何线索都会有所帮助。
I would prefer a workaround which does not involve using position: absoluteand setting an onscrollevent handler.
我更喜欢不涉及使用position: absolute和设置onscroll事件处理程序的解决方法。
回答by Alessandro Incarnati
It's a well known bug on Safari, both on iPad and iPhone.
这是 iPad 和 iPhone Safari 上的一个众所周知的错误。
A workaround it's to change the position to absolute to all elements set with fixed position.
一种解决方法是将位置更改为绝对设置为固定位置的所有元素。
In case you are using Modernizr you could also target mobile devices this way:
如果您使用的是 Modernizr，您还可以通过以下方式定位移动设备：
jQuery code
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
CSS
If I want to target just the header and footer for example, that are set with fixed position, when the class 'fixfixed' is added to the body I can change the position to absolute to all elements with fixed position.
例如，如果我只想定位设置为固定位置的页眉和页脚，则当将“fixfixed”类添加到正文时，我可以将位置更改为所有具有固定位置的元素的绝对位置。
.fixfixed header, .fixfixed footer {
position: absolute;
}
回答by JP Illanes
Position:Fixed has a lot of well known-bugs, you can check them here: Remysharp article. Probably you can still fix some of them using the answers from this question: CSS “position: fixed;” into iPad/iPhone?
位置：Fixed 有很多众所周知的错误，您可以在这里查看：Remysharp 文章。也许你仍然可以使用这个问题的答案来修复其中的一些：CSS“position: fixed;” 进入 iPad/iPhone？
Good luck!
祝你好运！
回答by Richard Lailey
Yep, this is specifically an iOS safari issue since v5. If you use Chrome on iOS you'll notice it will work OK. The bodge I use to fix this is to create and add a style element to the body and subsequently delete it and then perform the focus on the element.
是的，这是自 v5 以来的一个 iOS Safari 问题。如果您在 iOS 上使用 Chrome，您会发现它可以正常工作。我用来解决这个问题的 bodge 是创建一个样式元素并将其添加到正文中，然后将其删除，然后在该元素上执行焦点。
Don't ask me why this works, just too many hours of trial and error!
不要问我为什么这样做，只是试错了太多小时！
I've also noticed that after the first time this is fixed you don't have to perform the style trick for subsequent fixed positioned elements
我还注意到，在第一次修复之后，您不必为后续的固定定位元素执行样式技巧
