Does not take effect on <a> tag with [href] attribute
gwerghh opened this issue · comments
Environment: chrome 91.0.4472.114
But it is possible on the tag without the [href] attribute
I'll do some digging around - there's nothing in the paint worklet that should be stopping it from working on anchor elements that I know of.
May also be a Houdini Paint API implementation issue in Blink, as regular mask-image with url(path/to/image.svg) works without issue on anchor elements.
I've just gone and tried doing the same thing on a bunch of other Houdini Paint API worklets other people have made. They all have the same issue with the mask not being rendered correctly with either a mask on the anchor element, or an anchor element as a parent to the masked element when the [href] attribute is defined.
Will open a bug report on Chromium's bug tracker shortly.
Issue opened on the Chromium bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=1225443
Unfortunately, this is intentional on Chromium's end to avoid leaking the :visited state. You can work around this issue by applying the mask to the parent element of the anchor element instead. E.g <div class='mask'><a href='//wopian.local'>Link</a></div> as shown on https://s7mpl.csb.app/
I will add a notice regarding this limitation to the README.
https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet#privacy_concerns
w3c/css-houdini-drafts#791