在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中看到这个bug

有些尝试解决了这个问题,但是我不能用......

在尝试了多个事情后,这里解决了当前问题,但在其他方面造成了麻烦:

• 设置overflow:visible为ul;
  • 不知何故,这解决了问题,但我不能使用它,因为我正在使用$.fn.slideDown()它.在动画期间,jQuery设置为overflowto hidden,在动画时使bug可见.
• 改变position:relative的li和span别的东西;
  • 这确实有效,可能是最好的解决方案......如果你没有内部的绝对元素.对我来说就是这种情况.我也不能使用该修复程序.
• 只使用负数z-index(-2on canvas,-1on ul);
  • 这确实有效,但它会破坏IOS上的所有内容(也许其他设备,没有测试所有内容).
• 不使用否定z-index;
  • 这将是最好的,但iOS不喜欢它.滚动时,未涂漆的元素将出现在画布下,直到滚动完成.这是一种不良行为.

Answer 1

这似乎是一个Chromium/webkit(或blink)错误,它修复了它,满足您的所有条件,并且不需要对HTML结构或其他样式进行任何更改:

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

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