287510 2025-02-11 13:46:27 -0800 Hit-testing an element does not take the mask-image's bounds into account 2025-02-18 13:52:36 -0800 1 1 1 Unclassified WebKit UI Events WebKit Nightly Build All All RESOLVED DUPLICATE 284227 https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=13493 InRadar P2 Normal --- 1 tevo+webkit webkit-unassigned ahmad.saleem792 a_protyasha karlcow simon.fraser webkit-bug-importer zalan oldest_to_newest 2093933 0 tevo+webkit 2025-02-11 13:46:27 -0800 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. 2093947 1 tevo+webkit 2025-02-11 14:08:49 -0800 Pull request: https://github.com/WebKit/WebKit/pull/40434 2093968 2 simon.fraser 2025-02-11 15:09:42 -0800 This behavior is not specified by CSS. There's an open issue: https://github.com/w3c/csswg-drafts/issues/11339 2095578 3 webkit-bug-importer 2025-02-18 13:47:20 -0800 <rdar://problem/145087691> 2095581 4 a_protyasha 2025-02-18 13:52:36 -0800 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 ***