z-index 在基于 webkit 的浏览器中导致渲染问题答案

【问题标题】：z-index causing rendering issues in webkit based browsersz-index 在基于 webkit 的浏览器中导致渲染问题
【发布时间】：2014-06-24 09:05:45
【问题描述】：

我有这个插件作为动画背景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 网站上找到的，但它不起作用:'(

非常感谢任何帮助！ x

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：