html - 在 Chrome 中滚动时具有负 z-index 问题的 Canvas

Question

描述

Canvas 负 z-index 存在问题。基本上，当固定位置有2个元素，一个是 block 元素，另一个是 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(-2 在 canvas 上，-1 在ul);
  • 这也能正常工作，但它会把 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/