的z-index引起渲染基於WebKit瀏覽器的問題

Question

我有了這個插件作爲動畫背景http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/和我的網站頁面結構相同，例如3

我設置的背景是固定的， z-index爲-100，可以阻止頁腳與背景混合（因爲我希望它是純色）。

出於某種原因，我得到這個奇怪的渲染問題，只有當z-index被激活時纔會發生。我有一個固定的導航欄，當您向下滾動時會變黑並縮小。當我滾動時，它會卡住，當我向上滾動時，會從剛纔的位置留下一個導航欄的剪輯。

沒有任何人有這種經驗嗎？並可能有一些洞察，爲什麼發生這種情況？據我所知，這只是一個與鉻和歌劇的Z指數問題。

，設置在適當位置的背景（和z索引呼叫）

#ri-grid { 
    z-index: -100; 
    -webkit-transform: translateZ(-100); 
    position: fixed; 
    top: 0px; 
    opacity: 0.3; 
} 

我試圖與修復它越少-webkit變換：translateZ（-100）;這是我對Chrome錯誤網站上發現的，但它沒有工作：「（

任何幫助深表感謝X

Answer 1

我解決了這個問題，但我絕對不知道爲什麼它引起的奇怪的錯誤！發生。

我只是嵌套在背景元素與一類的網BG一個div，並設置了z索引來代替。是沒有意義的，但它的工作。

.grid-bg { 
    z-index: 100; 
    -webkit-transform: translateZ(100); 
} 

#ri-grid { 
    position: fixed; 
    top: 0px; 
    opacity: 0.3; 
}