iOS8上的新固定位置错误 [英] New Fixed position bug on iOS8

问题描述

我有一个带有固定标题和滑出侧边栏的网站。当iOS7处于纵向方向时，固定标题在侧边栏可见时保持固定，但在iOS8上，标题会略微向上推，具体取决于您滚动的距离。我需要它来保持固定。

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.

请参阅此jsbin： http：// jsbin .com / xuyevi / 2 /

See this jsbin: http://jsbin.com/xuyevi/2/

主要部分是标题，侧边栏和主要内容。标题使用固定位置固定在屏幕顶部，并具有z-index，使其在滚动时保持在内容之上。

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.

侧边栏固定为屏幕的左侧，最初通过左侧自己的宽度进行隐藏。

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.

同样，这适用于iOS7和支持translate3d的所有其他浏览器，它甚至可以在iOS8中正常工作景观定位。但是在纵向iOS8中，固定标题会根据用户滚动的距离从屏幕上滑落。

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.

此外，使用Safari检查器显示菜单项在屏幕上偏离他们的预期位置。即在检查器中选择一个元素会突出显示屏幕上与其呈现的实际位置偏移的区域。

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.

还有其他人遇到此问题吗？任何人都知道修复？

Has anyone else run into this? Anyone know a fix?

编辑：检查员认为固定位置标题正好在它应该的位置，即使它实际上被推离屏幕。

The inspector thinks that the fixed position header is exactly where it should be, even though it's actually getting pushed off screen.

推荐答案

派对有点晚，但添加

html, body {
    overflow-x: hidden;
    overflow-y: scroll;
}

将修复偏移的固定元素上的偏移滚动（例如左： iOS 8中的20px。

Will fix the offset scrolling on fixed elements that are offset (eg. left:20px) in iOS 8.

这篇关于iOS8上的新固定位置错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！