NEW 242114
Children of sticky-positioned elements can layer on top of overlay scrollbars 
https://bugs.webkit.org/show_bug.cgi?id=242114
Summary Children of sticky-positioned elements can layer on top of overlay scrollbars
Caleb Hearon
Reported 2022-06-29 09:49:30 PDT
Might be the same as 103156. TLDR: try dragging the scrollbars here **with overlay scrollbars enabled in system preferences**: https://jsfiddle.net/d2gjan4x/ The repro scenario involves this DOM structure: 1. A scrollable viewport 2. Inside that, a sticky-positioned element that takes full available with and height 3. Inside that, an element that expands to cover the same X/Y area taken by the scrollbars and establishes a new stacking context The mouse interaction goes to the last div. It tries to do text selection and the scrollbar won't move. Interestingly, I can also have `position: relative` on element #3, even though that shouldn't be enough to create a stacking context.
Attachments
Testcase (446 bytes, text/html)
2023-03-28 11:47 PDT, Simon Fraser (smfr) 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-07-06 09:50:15 PDT
<rdar://problem/96525856>
Bernardo Belchior
Comment 2 2023-03-28 02:39:41 PDT
I am facing this issue as well. I have another way to reproduce it, in case it is useful. I'm using Safari 16.3 on macOS 13.2.1. ```html <html lang="en"> <body> <div id="root"> <div style="position: absolute; inset: 0px; overflow: hidden auto;" data-test="absolute"> <div style="height: 150vh; position: sticky; width: 100vw; overflow: auto hidden; background-color: yellow;" data-test="sticky-outer"> <div data-test="sticky-inner" style="width: 100vw; height: 50vh; position: sticky; background-color: orange;"></div> </div> </div> </div> </body> </html> ```
Bernardo Belchior
Comment 3 2023-03-28 02:41:48 PDT
(In reply to Bernardo Belchior from comment #2) > I am facing this issue as well. I have another way to reproduce it, in case > it is useful. > > I'm using Safari 16.3 on macOS 13.2.1. > > ```html > <html lang="en"> > <body> > <div id="root"> > <div style="position: absolute; inset: 0px; overflow: hidden auto;" > data-test="absolute"> > <div style="height: 150vh; position: sticky; width: 100vw; overflow: > auto hidden; background-color: yellow;" > data-test="sticky-outer"> > <div data-test="sticky-inner" style="width: 100vw; height: 50vh; > position: sticky; background-color: orange;"></div> > </div> > </div> > </div> > </body> > </html> > ``` In order to reproduce, try grabbing the scrollbar when it is on top of the orange div. It won't work. It will work if you try to grab it in the yellow div, though.
Bernardo Belchior
Comment 4 2023-03-28 02:42:19 PDT
(In reply to Bernardo Belchior from comment #2) > I am facing this issue as well. I have another way to reproduce it, in case > it is useful. > > I'm using Safari 16.3 on macOS 13.2.1. > > ```html > <html lang="en"> > <body> > <div id="root"> > <div style="position: absolute; inset: 0px; overflow: hidden auto;" > data-test="absolute"> > <div style="height: 150vh; position: sticky; width: 100vw; overflow: > auto hidden; background-color: yellow;" > data-test="sticky-outer"> > <div data-test="sticky-inner" style="width: 100vw; height: 50vh; > position: sticky; background-color: orange;"></div> > </div> > </div> > </div> > </body> > </html> > ``` In order to reproduce, try grabbing the scrollbar when it is on top of the orange div. It won't work. It will work if you try to grab it in the yellow div, though.
Simon Fraser (smfr)
Comment 5 2023-03-28 11:47:42 PDT
Created attachment 465637 [details] Testcase
Note You need to log in before you can comment on or make changes to this bug.