angular / angular/components

Dialog/Overlay doesn't block scrolling if page dimensions change

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

Description

#### Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/components-issue-kktbjg

Steps to reproduce:
1. Click the Open Dialog button.
2. Wait 3 seconds for images to appear behind the dialog.

#### Expected Behavior

When a dialog is open and scroll blocking is enabled the content behind the dialog should not be scrollable.

#### Actual Behavior

If the content behind the dialog is not scrollable when the dialog is opened and then becomes scrollable while the dialog is still open then scroll blocking does not work. This can happen either when new page content loads or when the window is resized to be smaller.

#### Environment

- Angular: 8.0.0
- CDK/Material: 8.0.0
- Browser(s): Chrome 74.0.3729.169
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and the Angular CDK dialog/overlay scroll-blocking entry point. Reproduce the delayed content load and window resize cases, then verify that content behind an open dialog remains unscrollable after the page dimensions change.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.