Bug 284227
| Summary: | Content clipped by Mask Image is still clickable | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Paul Rhomberg <paulrhomberg01> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Major | CC: | a_protyasha, bfulgham, karlcow, simon.fraser, tevo+webkit, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 18 | ||
| Hardware: | All | ||
| OS: | All | ||
Paul Rhomberg
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)
Raised at https://github.com/w3c/csswg-drafts/issues/11339
Radar WebKit Bug Importer
<rdar://problem/141486297>
Abrar Rahman Protyasha
*** Bug 287510 has been marked as a duplicate of this bug. ***