0

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 在实现的某个地方崩溃。

4

1 回答 1

0

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

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

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

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>

于 2021-06-23T07:06:41.937 回答