iOS8上新的固定位置错误答案

【问题标题】：New Fixed position bug on iOS8iOS8上新的固定位置错误
【发布时间】：2014-10-15 20:00:29
【问题描述】：

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

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

侧边栏固定在屏幕的左侧，最初通过向左平移其自身宽度来隐藏。

要打开侧边栏，每个标题、内容和侧边栏都会向右平移侧边栏的宽度。

同样，这在 iOS7 和所有其他支持 translate3d 的浏览器上完美运行，甚至在 iOS8 中横向时也能正常运行。但在 iOS8 纵向模式下，固定标题会根据用户向下滚动的距离滑出屏幕。

此外，使用 Safari 检查器显示屏幕上的菜单项偏离了它们的预期位置。 IE。在检查器中选择一个元素会突出显示屏幕上偏离实际渲染位置的区域。

还有其他人遇到过这种情况吗？有人知道解决办法吗？

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

【问题讨论】：

我也遇到了这个问题。我注意到当使用position: fixed 时，容器的宽度大约是4/3 比它的父级大。使用position: -webkit-sticky 没有这个问题，但在我的情况下不起作用（不透明度/背景图像有问题）。如果/当我解决这个问题时，我会在这里发布答案。
我为我们的网站解决了这个问题，方法是从“推送”效果转变为“滑过”效果。主要内容现在保持不变，而侧边栏和标题滑入其中。如果可以的话，我宁愿回到推送，但现在我没有时间花在 iOS8 中似乎是错误的东西上。

【解决方案1】：

聚会有点晚了，但要补充

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

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

【讨论】：

这对我有用，但是它给我带来了一些性能问题——在某些页面上滚动非常慢。
@Kaganar 尝试以下操作：overflow-y: auto; -webkit-overflow-scrolling: touch; // momentum scrolling on iOS
@mwld，感谢您的提示 - 仅供参考的产品已经提供了不同的解决方案，但下次需要时我一定会试一试。

【解决方案2】：

我在 iOS 上使用多个固定位置元素和 CSS 动画画布外导航时遇到了类似问题。在长页面上，向上的“漂移”是一个障碍，因为它最终会增加到隐藏导航触发器的位置，从而无法关闭菜单。我广泛尝试找到解决方法并确定了一种解决方法：在制作动画之前滚动回顶部。（#ocnTrigger 是我的画布外菜单触发器。）

$('#ocnTrigger').click(function(){
    $('body').animate({
      scrollTop: 0
    }, 0);
});

【讨论】：

【解决方案3】：

我试图做类似的事情（参见here 和here）然后发现Apple 发布了technical note 建议避免使用固定定位。我发誓它在 iOS 7 中运行良好，但现在在 iOS8 中它不再“卡住”了。

这个问题似乎与设置这个元标记密切相关：

    <meta name="viewport" content="width=device-width">

【讨论】：