Scrollbar hidden when scroller has a negative z-index child

• Component: Compositing
• Status: RESOLVED FIXED

[Kerry]

Created attachment 432625 [details]
Scrollbar Not Visible

I noticed that sometimes the scrollbar doesn't render and instead draws what appears to be parts of the composited layer where the control should be. (I set a background color on the composited layer, and the scrollbar area picks up this color). This was found while debugging issues in the WordPress Block Editor.

I've attached a simple test case. This is also available at https://codepen.io/gwwar/pen/VwbYgmR It should look like the following when the incorrect behavior is visible :

https://user-images.githubusercontent.com/1270189/124032429-6b6ff100-d9ad-11eb-8377-322d1045422b.mp4

[Simon Fraser (smfr)]

Thanks for the testcase. Bug 216294 was supposed to fix this.

[Kerry]

One extra bit of information is that this bug also requires "Show scroll bars" to be set to "Always" (or use a Mouse with "Automatically based on mouse or trackpad").

I'm still seeing this display on Safari Technology Preview Release 126.

Quick video of the behavior here:

https://user-images.githubusercontent.com/1270189/124152046-061d0e00-da48-11eb-9c8f-9ae4e030a38c.mp4

[Simon Fraser (smfr)]

Somehow the overflow controls container is getting behind the scroller layer. Triggered by the negative z-index child:

S---------C-c-- -- ------ ------ 2 2 0x794e603a8 (0,0) width=1206 height=1152 [SA 0x794e20750] (layerID 26) {sc 2} RenderView 0x794fed2f0
S---------C-c-- -- ------ ------ 2 2   + 0x794e60618 (0,0) width=1206 height=1053 [SA 0x794e20ea0] (layerID 34) background layer RenderBlock 0x794feda70 HTML 0x794fed8c0
S---------C--s- -- ------ ------ 3 3     - 0x794e609c0 (0,0) width=1175 height=18 (layerID 32) overflow positioning RenderBlock (relative positioned) 0x794fefe90 DIV 0x794fef6b0 class='placeholder'
--O-------CP--- -- ------ ------ 2 3     + 0x794e60750 (8,8) width=1190 height=1037 [SA 0x794e41000] (layerID 33) stacking {sc 4} RenderBlock (relative positioned) 0x794fefc30 DIV 0x794fef4b0 class='scrollable'
-----------p-s- -- ------ ------ 3 3     + 0x794e60888 (0,0) width=1175 height=8046 RenderBlock (relative positioned) 0x794fefd60 DIV 0x794fef5b0 class='background-white'

[Simon Fraser (smfr)]

Logging says:
Moving overflow controls layer for 0x794e60750 to appear after 0x794e609c0
which is wrong.

[Radar WebKit Bug Importer]

<rdar://problem/80289516>

[Simon Fraser (smfr)]

Created attachment 433146 [details]
Patch

[EWS]

Committed r279748 (239524@main): <https://commits.webkit.org/239524@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 433146 [details].