PaintWorklet 无法在锚标记内工作

Question

Paint Worklet 在放置在锚标记内时无法工作。

示例站点：https://codepen.io/lonekorean/pen/aYoJPv

上面的例子，使用

<div class="polka-dot"></div>

作为

<a href="https://google.com"><div class="polka-dot"></div></a>

它不起作用。仅查看背景颜色，而不查看背景图像：paint(polka-dot-fade)。我认为锚标签和 Paint Worklet 在实现的某个地方崩溃了。

Answer 1

这实际上是有意为之，以减轻如果要绘制 :visited links 可能发生的隐私泄露。 Here 是讨论此问题的规范问题。
基本上，一个邪恶的网站可以通过仅对此类 link 应用 paint() 来判断哪个 link 已被访问，并检查是否已调用 PaintWorklet。
因此，Chrome 团队提出的当前解决方案是简单地禁用具有 href 属性的所有锚点的 PaintWorklet，直到根本问题得到妥善解决（但这需要时间）。

目前，要解决该问题，您必须将锚元素包裹在另一个元素中，然后在该包裹元素上应用绘画。

（请注意，该错误也会影响内部元素，因此如果您想在锚点内部的元素上应用该绘制，那将变得更加复杂...）

const url = URL.createObjectURL( new Blob( [ `
class GreenPainter {
  paint(ctx, size, props) {
    ctx.fillStyle = "green";
    ctx.fillRect(0, 0, size.width, size.height);
  }
}

registerPaint('green', GreenPainter);
` ], { type:"text/javascript"} ));

CSS.paintWorklet.addModule(url);

.paint-me {
  background: paint(green);
}
div.paint-me {
  display: inline-block;
}

<a href="" class="paint-me">
  reproduces the bug
</a>
<div class="paint-me">
  <a href="">
    works around the bug
  </a>
</div>

PaintWorklet 无法在锚标记内工作

PaintWorklet isn't working inside anchor tag

javascript

anchor

css-paint-api

css-houdini