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
Thanks for the testcase. Bug 216294 was supposed to fix this.
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
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'
Logging says: Moving overflow controls layer for 0x794e60750 to appear after 0x794e609c0 which is wrong.
<rdar://problem/80289516>
Created attachment 433146 [details] Patch
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].