Bug 227545 - Scrollbar hidden when scroller has a negative z-index child
Summary: Scrollbar hidden when scroller has a negative z-index child
Alias: None
Product: WebKit
Classification: Unclassified
Component: Compositing (show other bugs)
Version: Safari 14
Hardware: Mac (Intel) Unspecified
: P2 Normal
Assignee: Simon Fraser (smfr)
Keywords: InRadar
Depends on:
Reported: 2021-06-30 14:31 PDT by Kerry
Modified: 2021-07-08 13:29 PDT (History)
10 users (show)

See Also:

Scrollbar Not Visible (70.46 KB, text/html)
2021-06-30 14:31 PDT, Kerry
no flags Details
Patch (8.52 KB, patch)
2021-07-08 11:29 PDT, Simon Fraser (smfr)
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Kerry 2021-06-30 14:31:40 PDT
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 :

Comment 1 Simon Fraser (smfr) 2021-06-30 15:27:22 PDT
Thanks for the testcase. Bug 216294 was supposed to fix this.
Comment 2 Kerry 2021-07-01 08:41:53 PDT
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:

Comment 3 Simon Fraser (smfr) 2021-07-07 13:49:33 PDT
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'
Comment 4 Simon Fraser (smfr) 2021-07-07 13:51:05 PDT
Logging says:
Moving overflow controls layer for 0x794e60750 to appear after 0x794e609c0
which is wrong.
Comment 5 Radar WebKit Bug Importer 2021-07-07 14:32:16 PDT
Comment 6 Simon Fraser (smfr) 2021-07-08 11:29:10 PDT
Created attachment 433146 [details]
Comment 7 EWS 2021-07-08 13:29:40 PDT
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].