1571330 - Fixed element inside sticky container inside element with overflow-y: auto is being partially hidden

Status: NEW

(Core :: Layout: Scrolling and Overflow, defect, P3)

Description

[felipe.gdr]

Attachment: firefox-fixed-inside-sticky-inside-overflow-positi.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

Steps to reproduce:

1- create a container and force it to have a vertical scrollbar (overflow-y: auto with big content)
2- create a child element which has position: sticky
3- inside the sticky element, create an element with position: fixed and force it to overflow horizontally

Actual results:

The element with position: fixed is partially hidden. It seems like the top most container (the one with overflow-y: auto) is not overflowing in the x axis.

I have created a Code Sandbox that clearly reproduces the problem. I strongly recommend looking at this example since it's much easier to understand the problem:
https://codesandbox.io/s/firefox-stickyoverflow-weirdness-z27rw

Expected results:

The element with position: fixed is fully displayed -> this is the behaviour in other browsers (tested in Chrome and Safari)

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a somewhat reduced standalone testcase.

Comment 2

[Daniel Holbert [:dholbert]]

There are some known issues with flexbox layout and position:sticky (and this testcase does use flexbox). Putting a dependency on one of those in case it's related.

Comment 3

[connrs]

While I think Felipe's test case is a great example of the issue I just wanted to add that it's not specific to overflow-y but overflow in general.

Comment 4

[steveroof]

Hello, I encountered this issue today. Here is my CodeSandbox. Just compare vs Chrome to see the issue. In my case I am not using any display:flex.
https://codesandbox.io/s/escaping-a-hidden-container-e4dby9?file=/index.html

Someone also reported it in https://bugzilla.mozilla.org/show_bug.cgi?id=1452006 and provided the jsfiddle: https://jsfiddle.net/jjh63tpe/