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).
Do you have a test case that you could attach to the bug?
Created attachment 102162 [details] Test case (HTML file) for flashing scrollbar for overflow:auto elements under other elements with higher z-index.
Thank you for the great test case.
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.
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`.
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?