bug(Dialog): Scrolled sticky elements disappear in Firefox after opening Dialog

[dkimmich-onventis]

Reproduction

https://stackblitz.com/edit/angular-f9cnkz?file=src%2Fapp%2Fdialog-overview-example.ts

Steps to reproduce:

1. Place a sticky element in the application
2. Make application scrollable
3. Open the application in Firefox
4. Scroll to the bottom
5. Open a dialog

Expected Behavior

The sticky element is still displayed in the background (like it does in Chrome)

Actual Behavior

The sticky element disappears, and re-appears after closing the dialog

Environment

• Angular: 12.2.1
• CDK/Material: 12.2.1
• Browser(s): Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[crisbeto]

I suspect that this is because we're setting overflow: hidden on the body in order to block scrolling, but I'm not sure that there's a better way around it.

[AmitParekh1771]

This problem is cause by src/cdk/overlay/scroll/block-scroll-strategy.ts where we are programmatically adding a css class to html element as follow

html { 
    position: fixed;         // to lock scrolling, but this will scroll all the way to top
    width: 100%;
    overflow-y: scroll;            // to retain scroll bar, but in disabled state
}

Further, we are programmatically scrolling to the previous scroll position which helps to retain the scroll position.

Cause: This causes sticky element to move to its relative position.

Suggested solution: We can use position: relative and overflow-y: hidden/clip to retain sticky element position. Also we have to remove code that programmatically set scroll position as it is no more needed. Only thing is, scroll bar that was in disabled state previously will be removed (and I think it is completely fine).

NOTE: It is not an issue with Chrome✌️.