固定项目在滚动时跳转 - 仅在MacOS Safari中

时间:2013-03-03 12:29:54

标签: css macos safari

我在div中设置了一个带有固定侧边菜单的网页,其中包含以下css样式:

div#sidemenu
{
  top: 120px; left: 800px;
  width: 135px; 
  height: 560px;
  background-image: url(img/bg.png);
  position: fixed;  
  z-index: 30;
}

div很简单:

<div id="sidemenu">
<ul>
<li>link1</li>
...
<li>linkn</li>
</ul>
</div>

向下滚动页面时应保持固定状态。

适用于Windows和MacOS上的所有非Safari浏览器(IE,FF,OP),即使在Windows版本的Safari中 - 但不适用于MacOS Safari。

在MacOS Safari中,它会保持固定状态,但在滚动时会跳跃/颤抖/上下抖动。

我研究了这个问题一段时间,比较了css能力,降低了z-index并试图在底部修复。似乎没什么用。

有没有人经历过这样的事情?并且:你能解决它吗?

其他信息:

  • bg图像是带透明胶片的png
  • bg图像的大小与容器div一样大小

1 个答案:

答案 0 :(得分:1)

我在跳跃bg图像方面有类似的经验,而且似乎是跨浏览器的一种解决方法是在包装div中添加div。重要的是给新div一个高度,否则移动safari可能会调整滚动。

<div id="sidemenu">
<div id="bg"></div>
<ul>
<li>link1</li>
...
<li>linkn</li>
</ul>
</div>
div#sidemenu
{
  top: 120px; left: 800px;
  width: 135px; 
  height: 560px;
  position: fixed;  
  z-index: 30;
}

#bg {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    right:0;
    height: 500px;
    background-image: url(img/bg.png);
    background-position: 0 0;
}