在Chrome中滚动时带有负z-index问题的画布

Question

描述

画布底片z-index存在问题。基本上，当固定位置有2个元素时，一个是块元素而另一个是画布，画布的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，从而在动画制作时显示错误。
• 将position:relative和li的{​​{1}}更改为其他内容;
  • 这也有效，可能是最佳解决方案......如果你没有内部的绝对元素。对我来说就是这种情况。我也无法使用该修复程序。
• 在任何地方仅使用否定span z-index上的-2，canvas上的-1;
  • 这确实有效，但它会破坏IOS上的所有内容（也许是其他设备，并没有测试所有内容）。
• 不使用否定ul;
  • 那将是最好的，但iOS并不喜欢它。滚动时，未涂漆的元素将出现在画布下，直到滚动完成。这是一种不良行为。

Answer 1

这似乎是一个Chromium / webkit（或blink）错误，它修复了它，符合您的所有条件，并且不需要对HTML结构或其他样式进行任何更改：

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

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