固定項跳左右，而滾動 - 僅在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 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和嘗試修復底部。似乎沒有任何工作。

有沒有人經歷過這樣的事情呢？並且：你能解決它嗎？

其他信息：

• 的背景圖片是透明
• 的背景圖片的大小非常喜歡div容器

Answer 1

我有類似的經歷與跳躍BG圖像的PNG和一個似乎是跨瀏覽器的解決方法是在包裝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; 
}