为什么屏幕外画布不遵守背景过滤器样式属性

Question

我有一个项目，在其中我使用网络工作者绘制画布。绘图效果很好。对于该部分的其余设计，我有 4 张卡片，我希望它们在画布上应用背景滤镜。由于某种原因，过滤器部分影响了画布，但没有给我想要的效果。

如上图所示，正在应用模糊效果，但同时画布从后面显示，就好像根本没有应用滤镜一样。

有关更多信息，我已打开 DevTools 中的“图层”选项卡来查看 Google Chrome 如何渲染这些图层，并且图层的顺序似乎很好，不过，似乎这个单一的屏幕外画布元素创建了另外 2 个不存在的图层在 DOM 中，其渲染分辨率略有变化（原始为 1320x600，其他 2 个为 1323x600 和 1327x604）。

下面是用于这些元素的 JSX 和 CSS 代码（用 React 编写）

<div className="container">
   <div className="canvas-wrapper">
      <canvas ref={canvasRef}></canvas>
   </div>
   <div className="cards-container">
      <AnimatedCard header='header1'>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni possimus labore fugit impedit quaerat reiciendis hic velit laboriosam praesentium ad?
      </AnimatedCard>
      <AnimatedCard header='header2'>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni possimus labore fugit impedit quaerat reiciendis hic velit laboriosam praesentium ad?
      </AnimatedCard>
      <AnimatedCard header='header3'>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni possimus labore fugit impedit quaerat reiciendis hic velit laboriosam praesentium ad?
      </AnimatedCard>
      <AnimatedCard header='header4'>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni possimus labore fugit impedit quaerat reiciendis hic velit laboriosam praesentium ad?
      </AnimatedCard>
   </div>
</div>

.canvas-wrapper {
    position: absolute;
    width: calc(100% - 8px);
    height: 100%;
    left: 5px;
    z-index: -100;
}

canvas {
    width: 100%;
    height: 100%;
    position: relative;
    mask-image: linear-gradient(rgba(0, 6, 10, 1) 85%, transparent 95%);
    border-left: 1px solid var(--gray-border-color);
    border-right: 1px solid var(--gray-border-color;
    z-index: -10;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    position: relative;
    z-index: 10;
}

// this is the background of the cards above
.card-wrapper {
    display: flex;
    background-color: rgba(var(--black-tint-3), 0.1);
    flex-direction: column;
    border-radius: 10px;
    height: 100%;
    width: 100%;
    padding: 32px 16px;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 10;
}

Answer 1

这是一个错误，由 this CL 引入。

我很快就会打开一份报告，希望这个问题能尽快得到解决。

值得注意的是，您甚至不需要将控制转移到

OffscreenCanvas

，直接在

<canvas>

上使用 2D 上下文也会重现该错误。

您可以通过在

<canvas>

元素^1..

上指定透明渐变背景图像来解决此问题

下面是一个简单的重现，通过选中复选框设置解决方法：

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

/* CSS checkerboard stolen from https://drafts.csswg.org/css-images-4/#example-2de97f53 */
body {
  background: repeating-conic-gradient(rgba(0,0,0,0.5) 0deg 25%, white 0deg 50%);
  background-size: 2em 2em;
}
canvas-holder { display: block; backdrop-filter: blur(5px); }

label { background: white }
label:has(:checked) + canvas-holder canvas {
  background-image: linear-gradient(transparent, transparent);
}

<label><input type="checkbox"> Apply fix</label>
<canvas-holder>
  <canvas></canvas>
</canvas-holder>

---

^{1。似乎许多其他设置可以防止该错误，例如在容器上绘制边框或轮廓，但透明背景图像似乎不那么干扰。}