Bug 65259 – Safari flashes scrollbar for overflow:auto/scrollbar elements that are hidden behind other elements

• Status: NEW
• Component: Layout and Rendering

[Bart S.]

I'm working on a lightbox and have been noticing a strange scrollbar flashing on the page every time I give that tab focus. I just realized this was because there is an element behind it that has overflow:auto. 

WebKit should respect the z-index of elements for the scrollbar and flash it at the appropriate level (in this case behind my lightbox).

[Alexey Proskuryakov]

Do you have a test case that you could attach to the bug?

[Bart S.]

Created attachment 102162 [details]
Test case (HTML file) for flashing scrollbar for overflow:auto elements under other elements with higher z-index.

[Alexey Proskuryakov]

Thank you for the great test case.

[Beth Dakin]

Indeed, right now overlay scrollbars paint on top of everything. It is extraordinarily difficult to get them to paint in the right layer, which is why we took the shortcut for now.

[jonjohnjohnson]

[e-mail] Any changes/thoughts on this in the last seven years?

It seems the initial flashing isn't exactly the/an issue anymore, though the test case submitted from a duplicate filing simply shows that scrollbars still painting above content that it shouldn't be.

https://bug-96825-attachments.webkit.org/attachment.cgi?id=164226

I'm on 10.12.6 with safari 12.0.2 in the test case when scrolling the red container, it's scrollbar shows above the green element which is "stacked" above the red container.

I'm guessing the shortcut that was taken is something that is bypassed on iOS with the use of `-webkit-overflow-scrolling: touch` compositing in a different way than desktop???

From what I've seen blink has remedied this issue for mac.
And gecko *only has this issue on mac *if stacking context places content above with use of implicit/initial `z-index` value of `auto`, but works well when explicitly setting `z-index`.

[Ahmad Saleem]

I am not able to reproduce using Safari 16.5, where the scrollbar of red container overlap on top of green container as per Comment 05 test case and also don't see any scrollbar flashing in Comment 03.

NOTE - I do have 'scrollbars' to be always visible option turned on.

Is it fixed or requires to turn off above setting?