在 Chrome 中滚动时出现负 z-index 问题的画布

Posted 2023-03-05

【中文标题】在 Chrome 中滚动时出现负 z-index 问题的画布

【英文标题】：Canvas with negative z-index issue on scroll in Chrome

【发布时间】：2015-05-08 10:24:12

【问题描述】：

说明

canvas 负 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，使该错误在动画时可见。

将li 和span 的position:relative 更改为其他内容；

这也确实有效，可能是最佳 解决方案...如果您没有绝对元素。对我来说就是这种情况。我也无法使用该修复程序。

在任何地方都只使用否定的z-index（-2 on canvas，-1 on ul）；

这确实有效，但它会弄乱 ios 上的所有内容（可能还有其他设备，并没有测试所有内容）。

不使用否定的z-index；

那会是最好的，但 iOS 不喜欢它。滚动时，未绘制的元素将出现在画布下，直到滚动完成。这是一种不良行为。

【问题讨论】：

在我的例子中，将 z-index: -1 放在 body 上解决了带有 z-index: -1 的 div 的滚动问题。

【参考方案1】：

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

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

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

【讨论】：

我不敢相信它成功了！你是救生员，非常感谢！

我很惊讶我居然找到了这个完全奇怪问题的答案。我没有负 z-index，但仍然有问题，这似乎已经解决了它

你真的应该得到世界上所有的积分来解决这个问题。谢谢。