iOS8上新的固定位置错误

时间:2014-10-15 20:00:29

标签: ios scroll position ios8 fixed

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

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

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

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

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

同样,这在iOS7和支持translate3d的所有其他浏览器上完美运行,并且在横向方向上甚至可以在iOS8中正常工作。但是在纵向iOS8中,固定标题会根据用户滚动的距离从屏幕上滑落。

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

有没有其他人遇到这个?有人知道修复吗?

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

3 个答案:

答案 0 :(得分:4)

派对有点晚了,但加上

DBNAMEAPP=mytest_app

DBNAMESYS=mytest_sys

将修复在iOS 8中偏移(例如,左:20px)的固定元素上的偏移滚动。

答案 1 :(得分:1)

我在iOS上使用多个固定位置元素和CSS动画画布外导航时遇到类似问题。在一个长页面上,向上的“漂移”是一个阻挡因素,因为它最终增加到隐藏导航触发器的程度,使得无法关闭菜单。我尝试了大量修复并找到了解决方法:在动画制作之前滚动回顶部。 (#ocnTrigger是我的非画布菜单触发器。)

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

答案 2 :(得分:0)

我尝试做类似的事情(请参阅herehere),然后发现Apple发布了technical note,建议避免固定定位。我发誓它在iOS 7中运行良好,但现在使用iOS8它不再“坚持”。

此问题似乎与设置此元标记密切相关:

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

另请参阅:Fix div to bottom without using css position