bhainesva Reporter
	Description • 6 years ago

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180405220026

Steps to reproduce:

Demonstrated in this jsFiddle: https://jsfiddle.net/jjh63tpe/

I put an element with `position: fixed` inside an element with `position: sticky` where the sticky element is the child of an overflowing parent. 

I tried this in Firefox 59 for Mac and Firefox 59 and Nightly for Windows 10. 


Actual results:

When I load the linked jsFiddle on a screen small enough that the yellow rectangle overflows and a scroll bar appears, the orange square displays fully, above the yellow rectangle and its scrollbar. When I click into the page the orange square disappears partially, appearing to be cut off by the edges of the yellow rectangle. Waiting for some amount of time (~20 seconds seems long enough but it varies), the orange square reappears fully but disappears on another click. 


Expected results:

I expect the orange square to always render fully, visually in front of the yellow rectangle and its scrollbar. This is how it behaves in other browsers (I've tried Chrome 65 on Windows/Mac, Internet Explorer 11 and Edge). In all cases the orange box renders fully (although the sticky positioning doesn't work in IE because it isn't supported). 

Changing the `position: sticky` element to have any other positioning causes the orange box to render as I expect. Removing content from the yellow rectangle such that it no longer overflows also causes the orange box to render as I expect.