Bug 152548
| Summary: | clip-path property incorrectly clips pointer-events for clipped elements | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Klemen Slavic <krof.drakula> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | augus.dupin, dnl.rlnd, edarocha1324, simon.fraser, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 9 | ||
| Hardware: | All | ||
| OS: | All | ||
| Bug Depends on: | |||
| Bug Blocks: | 126207 | ||
Klemen Slavic
Reproduction URL: http://codepen.io/KrofDrakula/pen/zrKNKP
What steps will reproduce the problem?
1. open the page in the link
2. try clicking outside of the images/red area on the text surrounding the images
3. popup alert() appears notifying you of a click on one of the .content <img> elements
What is the expected result?
Should not pop up an alert() since the images should not be clickable outside of their clip-path regions (clipped by its parent, .view).
What happens instead of that?
Pointer events are triggered on the fixed positioned element outside of its parent's clipping path, which it shouldn't (it doesn't render outside of the bounds of its parent's clip path).
Note: this happens in Chrome, too (https://code.google.com/p/chromium/issues/detail?id=572107). Firefox handles this correctly, but in the demo page, the third example doesn't work since it only supports URL SVG clipping paths, not inset().
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Daniele Orlando
I still can reproduce this bug with Safari 13.0.5, 4 years ago.
Firefox and Chrome do behave as expected instead.
Radar WebKit Bug Importer
<rdar://problem/59954339>
Bruno Stasse
This seems fixed in STP 134 (and maybe before)? I can't reproduce anymore with the testcase.
There are still issues probably related to this, with scrolling. I just created this: https://bugs.webkit.org/show_bug.cgi?id=233084