Bug 65259

Summary: Safari flashes scrollbar for overflow:auto/scrollbar elements that are hidden behind other elements
Product: WebKit Reporter: Bart S. <bart>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, ap, bdakin, hi, sam, simon.fraser, thorton, zalan
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Mac (Intel)   
OS: OS X 10.7   
Attachments:
Description Flags
Test case (HTML file) for flashing scrollbar for overflow:auto elements under other elements with higher z-index. none

Description Bart S. 2011-07-27 08:24:58 PDT 
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).
Comment 1 Alexey Proskuryakov 2011-07-27 10:31:42 PDT 
Do you have a test case that you could attach to the bug?
Comment 2 Bart S. 2011-07-27 12:02:08 PDT 
Created attachment 102162 [details]
Test case (HTML file) for flashing scrollbar for overflow:auto elements under other elements with higher z-index.
Comment 3 Alexey Proskuryakov 2011-08-19 13:16:39 PDT 
Thank you for the great test case.
Comment 4 Beth Dakin 2011-08-19 13:27:50 PDT 
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.
Comment 5 jonjohnjohnson 2018-12-10 07:59:38 PST 
bdakin@apple.com 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`.
Comment 6 Ahmad Saleem 2023-06-15 12:24:29 PDT 
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?