Full Text Bug Listing

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.

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

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.

Bug 242114