| Summary: | Scroll through content hidden with clip-path does not propagate below | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Bruno Stasse <augus.dupin> | ||||
| Component: | UI Events | Assignee: | Simon Fraser (smfr) <simon.fraser> | ||||
| Status: | RESOLVED FIXED | ||||||
| Severity: | Normal | CC: | augus.dupin, graouts, satoshionoda, simon.fraser, webkit-bug-importer, zalan | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari Technology Preview | ||||||
| Hardware: | All | ||||||
| OS: | All | ||||||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=214367 | ||||||
| Attachments: |
|
||||||
This might be bug 214367 Is there any update on this? This is a pretty bad bug and a substantial issue for me. Pull request: https://github.com/WebKit/WebKit/pull/8896 @Bruno Stasse I've encountered exactly the same problem and found a strange solution. Adding a wheel event to the clipped element somehow solves this. https://codepen.io/satoshionoda/pen/yLqvXrW I suppose this is quite hacky but can be used until this bug is completely solved. (In reply to Satoshi Onoda from comment #5) > @Bruno Stasse > > I've encountered exactly the same problem and found a strange solution. > Adding a wheel event to the clipped element somehow solves this. > > https://codepen.io/satoshionoda/pen/yLqvXrW > > I suppose this is quite hacky but can be used until this bug is completely > solved. That makes sense because wheel event handlers kick WebKit off of the fast path. Ha that's quite interesting, thank you Satoshi Onoda! Unfortunately I need it to work on iOS, and there is no wheel events there so it doesn't work. If anyone has another workaround for iOS it would be very much welcome. Committed 259368@main (96deabf28dd0): <https://commits.webkit.org/259368@main> Reviewed commits have been landed. Closing PR #8896 and removing active labels. Thank you for the fix! |
Created attachment 444137 [details] testcase When clip-path is applied to an element, the content below the clipped part of the element cannot be scrolled, instead nothing happens. See the attachment. Scrolling below the purple square should trigger scroll underneath, but nothing happens. Note that other events (CSS hover and click) seem to work fine.