PaintWorklet 在锚标记内不起作用 [英] PaintWorklet isn't working inside anchor tag

问题描述

Paint Worklet 在放置在锚标记内时不起作用.

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

以上示例，使用

作为

;</a>

它不起作用.只看背景颜色，不看背景图片:paint(polka-dot-fade).我认为锚标记和 Paint Worklet 在实现中的某个地方会崩溃.

解决方案

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

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

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

const url = URL.createObjectURL( new Blob( [ `类绿色画家{油漆(ctx，大小，道具){ctx.fillStyle = "绿色";ctx.fillRect(0, 0, size.width, size.height);}}registerPaint('green', GreenPainter);` ], { type:"text/javascript"} ));CSS.paintWorklet.addModule(url);

.paint-me {背景:油漆(绿色)；}div.paint-我{显示:内联块；}

重现错误</a><div class="paint-me"><a href="">解决该错误</a>

Paint Worklet isn't working when it's placed inside an anchor tag.

Example Site: https://codepen.io/lonekorean/pen/aYoJPv

Above Example, Use

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

as

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

It's not working. See only background-color, not background-image: paint(polka-dot-fade). I think anchor tags and Paint Worklet crash somewhere in implementation.

解决方案

This is actually intentional, to mitigate with a privacy leak that could happen if one were to paint :visited links. Here is a specs issue discussing this.
Basically an evil website could tell which link has been visited by applying a paint() only for such links and check if the PaintWorklet has been called.
So the current solution Chrome's team came with was to simply disable the PaintWorklet for all anchors with an href attribute, that is until the root problem gets properly addressed (but this will take time).

For the time being, to workaround that issue, you'd have to wrap your anchor element inside an other element an apply the paint on that wrapper element.

(Note that the bug also affects inner elements, so if you wanted to apply that paint on an element inside the anchor, that would become more complicated...)

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 在锚标记内不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！