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