ios iOS8上的新固定位置错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26391059/
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
New Fixed position bug on iOS8
提问by Mike Snare
I have a site with a fixed header and slide-out sidebars. With iOS7 in portrait orientation, the fixed header stays fixed when the sidebar is visible, but on iOS8 the header pushes slightly upward depending on how far down you are scrolled. I need it to stay fixed.
我有一个带有固定标题和滑出侧边栏的网站。在 iOS7 处于纵向时，固定标题在侧边栏可见时保持固定，但在 iOS8 上，标题会根据您向下滚动的程度略微向上推。我需要它保持固定。
See this jsbin: http://jsbin.com/xuyevi/2/
看到这个jsbin：http://jsbin.com/xuyevi/2/
The main pieces are a header, a sidebar, and the main content. The header is fixed to the top of the screen using fixed position and has a z-index that keeps it above the content when you are scrolling.
主要部分是标题、侧边栏和主要内容。标题使用固定位置固定在屏幕顶部，并具有一个 z-index，可在您滚动时将其保持在内容上方。
The sidebar is fixed to the left side of the screen, and is initially hidden by being translated left by its own width.
侧边栏固定在屏幕左侧，最初通过向左平移其自身宽度而隐藏。
To open the sidebar, each of the header, content, and sidebars are translated to the right by the width of the sidebar.
要打开侧边栏，每个标题、内容和侧边栏都会向右平移侧边栏的宽度。
Again, this works perfectly on iOS7 and all other browsers that support translate3d, and it even works correctly in iOS8 when in landscape orientation. But in iOS8 in portrait, the fixed header will slide off the screen based on how far down the user is scrolled.
同样，这在 iOS7 和所有其他支持 translate3d 的浏览器上都可以完美运行，甚至在 iOS8 横向时也可以正常运行。但在 iOS8 中，固定标题会根据用户向下滚动的程度从屏幕上滑落。
Further, using the Safari inspector shows that the menu items on screen are offset from their expected positions. I.e. selecting an element in the inspector highlights an area on the screen that is offset from the actual location where it's rendered.
此外，使用 Safari 检查器显示屏幕上的菜单项偏离了它们的预期位置。即在检查器中选择一个元素会突出显示屏幕上偏离实际渲染位置的区域。
Has anyone else run into this? Anyone know a fix?
有没有其他人遇到过这个问题？有人知道修复吗？
EDIT: The inspector thinks that the fixed position header is exactly where it should be, even though it's actually getting pushed off screen.
编辑：检查员认为固定位置标题正是它应该在的位置，即使它实际上被推离了屏幕。
回答by MaximeDesRoches
A little late to the party, but adding
聚会有点晚，但补充
html, body {
overflow-x: hidden;
overflow-y: scroll;
}
Will fix the offset scrolling on fixed elements that are offset (eg. left:20px) in iOS 8.
将修复在 iOS 8 中偏移的固定元素上的偏移滚动（例如 left:20px）。
回答by pixelslave
I had a similar issue on iOS using multiple fixed position elements and a CSS animated off-canvas nav. On a long page the upward "drift" was a blocker because it eventually increased to the point where it hid the nav trigger, making it impossible to close the menu. I tried extensively to find a fix and settled on a workaround: scroll back to top before animating. (#ocnTrigger is my off-canvas menu trigger.)
我在使用多个固定位置元素和 CSS 动画画布导航的 iOS 上遇到了类似的问题。在长页面上，向上的“漂移”是一个障碍，因为它最终会增加到隐藏导航触发器的程度，从而无法关闭菜单。我广泛尝试找到修复方法并确定了解决方法：在动画之前滚动回顶部。（#ocnTrigger 是我的画布外菜单触发器。）
$('#ocnTrigger').click(function(){
$('body').animate({
scrollTop: 0
}, 0);
});
回答by iX3
I was trying to do something similar (see hereand here) then found that Apple has published a technical noterecommending that fixed positioning be avoided. I swear it worked fine in iOS 7, but now with iOS8 it no longer "sticks".
我试图做一些类似的事情（见这里和这里）然后发现 Apple 发布了一份技术说明，建议避免固定定位。我发誓它在 iOS 7 中运行良好，但现在使用 iOS8 它不再“粘住”。
This problem seems closely related to setting this meta tag:
这个问题似乎与设置这个元标记密切相关：
<meta name="viewport" content="width=device-width">
