284227 2024-12-07 06:20:16 -0800 Content clipped by Mask Image is still clickable 2025-02-18 13:52:36 -0800 1 1 1 Unclassified WebKit Layout and Rendering Safari 18 All All NEW InRadar P2 Major --- 1 paulrhomberg01 webkit-unassigned a_protyasha bfulgham karlcow simon.fraser tevo+webkit webkit-bug-importer zalan oldest_to_newest 2079898 0 paulrhomberg01 2024-12-07 06:20:16 -0800 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 :-) 2080316 1 simon.fraser 2024-12-09 13:51:23 -0800 Raised at https://github.com/w3c/csswg-drafts/issues/11339 2081789 2 webkit-bug-importer 2024-12-14 06:21:12 -0800 <rdar://problem/141486297> 2095582 3 a_protyasha 2025-02-18 13:52:36 -0800 *** Bug 287510 has been marked as a duplicate of this bug. ***