css - 固定元素在滚动时跳来跳去 - 仅在 MacOS Safari 中

Question

我有一个网页，在一个 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 并尝试固定在底部。似乎没有任何效果。

有没有人也遇到过这样的事情？并且:你能修好它吗？

附加信息:

• 背景图片是透明的png
• 背景图像的大小与容器 div 的大小完全一致

Answer 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;
}