Bug 242114

Summary: Children of sticky-positioned elements can layer on top of overlay scrollbars
Product: WebKit Reporter: Caleb Hearon <caleb>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bernardo.belchior, bfulgham, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Mac (Intel)   
OS: macOS 12   
Attachments:
Description Flags
Testcase none

Description Caleb Hearon 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.
Comment 1 Radar WebKit Bug Importer 2022-07-06 09:50:15 PDT 
<rdar://problem/96525856>
Comment 2 Bernardo Belchior 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>
```
Comment 3 Bernardo Belchior 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.
Comment 4 Bernardo Belchior 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.
Comment 5 Simon Fraser (smfr) 2023-03-28 11:47:42 PDT 
Created attachment 465637 [details]
Testcase