Canvas Chrome 滚动时出现负 z-index 问题

Question

描述

canvas 负 z-index 存在问题。基本上，固定位置有2个元素，一个是块元素，另一个是canvas，canvas的z-index为负数，会滚动第二个一个不管它是什么 z-index.

此错误仅发生在 Chrome：Mac 和 PC。

代码示例

这是一个 HTML 示例（针对问题进行了缩减）：

<ul>
    <li><span>test1</span></li>
    <li><span>test1</span></li>
    <li><span>test1</span></li>
</ul>

<div>
    <canvas />
</div>

和 CSS

html,body{
    height : 150%;
}

ul {
    position : fixed;
    z-index : -1;
    top : 0;
    left : 0;
    width : 100%;
    margin : 0;
    padding : 0;
    overflow : auto;

    li {
        float : left;
        width : 33%;
        height : 100px;
        background : red;
        position : relative;
        list-style: none;

        span{
            display:block;
            position : relative;
        }
    }
}
div {
    position : fixed;
    z-index : -2;
    top : 0;
    left : 0;

    canvas{
        opacity : 0.5
    }
}

我省略了 JavaScript 因为我确定这不是问题所在。

您可以在此 jsFiddle

中查看正在运行的错误

一些尝试有点解决了问题，但我不能使用...

经过多次尝试，这里解决了当前的问题，但在其他方面造成了麻烦：

• 将 overflow:visible 设置为 ul;
  • 不知何故，这解决了问题，但我不能使用它，因为我在上面使用 $.fn.slideDown()。在动画期间，jQuery 将 overflow 设置为 hidden，使错误在动画时可见。
• 将 li 和 span 的 position:relative 更改为其他内容；
  • 这也行得通，可能是 最佳 解决方案...如果您内部没有绝对元素。我就是这种情况。我也无法使用该修复程序。
• 到处都只使用否定的z-index（canvas上的-2，ul上的-1）；
  • 这确实有效，但它会弄乱 IOS 上的所有内容（可能还有其他设备，没有测试所有内容）。
• 不使用负数z-index;
  • 那将是最好的，但 iOS 不喜欢它。滚动时，未绘制的元素将出现在 canvas 下，直到滚动完成。这是不受欢迎的行为。

Answer 1

这似乎是一个 Chromium/webkit（或眨眼）错误，这修复了它，满足您的所有标准并且不需要对 HTML 结构或其余样式进行更改：

ul {
    /* rest of the styles */
    -webkit-transform: translate3d(0,0,0);
}

演示 http://jsfiddle.net/3a66445w/2/