Bug 181818 – CSS resize handle can be covered by child (composited) elements

• Component: CSS
• Status: NEW

[Roko]

# CSS `resize: both` handler issue

### Issue:

Parent CSS `resize` handler is shadowed by child element. (On Firefox it works. Handler is visible (painted on a higher Z-index layer) and receiver resize events).

### Description:

Resize handler shadowed by Canvas element (Similar to [144526](https://bugs.webkit.org/show_bug.cgi?id=144526) but regardless of absolute positioning)

### Test case:

https://jsfiddle.net/tqqhpa0f/1/

1. Handler not visible.
2. Even if not visible, when overlayed by IMG (see jsfiddle) it receives resize events.
3. When canvas element is child of our `resize` parent - the handler is not visible (like in IMG case) but it doesn't receives any events.

[Radar WebKit Bug Importer]

<rdar://problem/36739743>

[Ahmad Saleem]

I am still able to reproduce this from attached JSFiddle in Comment 01 using Safari 15.5 on macOS 12.4.

I am unable to resize "red" canvas but when I expand, I can see yellow <div> and it can be resize. All other browsers like Chrome Canary 104 and Firefox Nightly 103 are able to resize "red canvas' as well.

Thanks!

[Tim Guan-tin Chien [:timdream]]

Created attachment 465972 [details]
test case

Test case for the canvas case.