NEW 284227
Content clipped by Mask Image is still clickable 
https://bugs.webkit.org/show_bug.cgi?id=284227
Summary Content clipped by Mask Image is still clickable
Paul Rhomberg
Reported 2024-12-07 06:20:16 PST
Hi everyone! In Safari, elements that are being clipped by "Mask-Image" with "Mask-Composite: Intersect" are still clickable, even if they are not visible. In Firefox and Chromium, these elements are not clickable. Therefore, I assume this could be a bug. Here is a Codepen that reproduces this issue: https://codepen.io/therealpaulplay/pen/wBwGdXX Try clicking on the elements that exist below the white fade, you will see that the hover effect displays and that on click, the alert shows, whereas in Chrome and Firefox, this does not happen. The reason this could be a rather critical bug is because on some sites, where this effect is being used, you cannot click on elements that show up below the clip, as the click event would instead be sent to the clipped of elements. Putting overflow: hidden or overflow: clip on the container with the mask-image is an easy "fix" in the meantime. I hope this will be fixed, have a nice Christmas time y'all :-)
Attachments
Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2024-12-09 13:51:23 PST
Raised at https://github.com/w3c/csswg-drafts/issues/11339
Radar WebKit Bug Importer
Comment 2 2024-12-14 06:21:12 PST
<rdar://problem/141486297>
Note You need to log in before you can comment on or make changes to this bug.