RESOLVED DUPLICATE of bug 284227 287510
Hit-testing an element does not take the mask-image's bounds into account 
https://bugs.webkit.org/show_bug.cgi?id=287510
Summary Hit-testing an element does not take the mask-image's bounds into account
Estevan Castilho
Reported 2025-02-11 13:46:27 PST
Consider the following: <div style="width: 64px; height: 64px; mask-image: linear-gradient(white, white)"> <div style="width: 128px; height: 128px; background: rebeccapurple" onclick="alert ('hi!')"></div> </div> Visually, the inner element gets clipped by the outer element's mask bounds, and renders as a 64x64 purple block, as it might be expected. Clicking anywhere within the inner element's 128x128 bounds, however, would still dispatch the click event to the child element, even within the masked-out region. Now, even though CSS-MASKING-1 doesn't seem to explicitly specify whether or not pointer events should be dispatched outside of the mask's bounding box (as it does for clips), both Blink and Gecko seem not to, which makes more sense from a user's perspective, I think.
Attachments
Add attachment proposed patch, testcase, etc.
Estevan Castilho
Comment 1 2025-02-11 14:08:49 PST
Pull request: https://github.com/WebKit/WebKit/pull/40434
Simon Fraser (smfr)
Comment 2 2025-02-11 15:09:42 PST
This behavior is not specified by CSS. There's an open issue: https://github.com/w3c/csswg-drafts/issues/11339
Radar WebKit Bug Importer
Comment 3 2025-02-18 13:47:20 PST
<rdar://problem/145087691>
Abrar Rahman Protyasha
Comment 4 2025-02-18 13:52:36 PST
This is a dupe of bug 284227. We should await the CSS spec resolution. *** This bug has been marked as a duplicate of bug 284227 ***
Note You need to log in before you can comment on or make changes to this bug.