angular / angular/components

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

Open
#23,354 2 comments 7 reactions 0 assignees View on GitHub
area: cdk/overlay firefox P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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)

![angular-material-dialog-chrome](https://user-images.githubusercontent.com/68286501/129209706-e693eeaf-0c6a-4357-b371-6350efd58eb8.gif)

#### Actual Behavior

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

![angular-material-dialog-firefox](https://user-images.githubusercontent.com/68286501/129209251-22de3be0-6375-4f30-81e0-160e5a388779.gif)

#### Environment

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

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction, specifically src/app/dialog-overview-example.ts, and reproduce the behavior in Firefox after scrolling and opening the dialog. Compare it with Chrome; the work is done when the sticky background element remains visible while the dialog is open in Firefox.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.