z-index导致基于webkit的浏览器中的呈现问题

Question

我已将此插件设为动画背景http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/，我的网页结构与示例3相同。

我设置要修复的背景，z-index为-100，阻止页脚与背景混合（因为我希望它是纯色）。

出于某种原因，我得到了这个奇怪的渲染问题，只有在z-index处于活动状态时才会发生。我有一个固定的导航栏，当你向下滚动时，它会动画为黑色并缩小。当我滚动时它会卡住，当我向上滚动时，它会留下导航栏的剪切位置。

有没有其他人有这方面的经验？并且可能对这种情况发生的原因有所了解？据我所知，它只是chrome和opera的z-index问题。

设置背景的次数越少（和z-index调用）

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

我尝试用-webkit-transform修复它：translateZ（-100）;我在chrome bug网站上找到了它，但它没有工作：＆＃39;（

非常感谢任何帮助！ X

Answer 1

我解决了这个问题，虽然我完全不知道为什么它会导致奇怪的错误发生。

我只是将背景元素嵌套到一个带有grid-bg类的div中，然后在其上设置z-index。没有任何意义，但它奏效了。

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

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