bug(MatDialog): Material dialog shows a blank screen after closing the modal

[thakurvijendar]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Summary

Angular Material 18.2.14 dialogs exhibit a persistent blank screen issue after closing, where subsequent modal interactions show a blank overlay that blocks user
interaction for extended periods. This occurs specifically starting from the second modal open/close cycle.

Environment

• Angular: 18.2.13
• Angular Material: 18.2.14
• Angular CDK: 18.2.14
• Browser: Chrome (latest)
• OS: macOS/Windows
• Node: 22.x

Bug Description

After opening and closing a MatDialog for the first time, subsequent dialog open/close cycles result in a blank screen overlay that persists for several seconds, blocking all user interaction. The blank screen appears immediately after clicking the dialog close button and prevents any further interaction with
the application.

Reproduction Steps

1. Open any MatDialog using MatDialog.open()
2. Close the dialog by clicking a button or backdrop
3. Wait for dialog to close completely
4. Open the same dialog again
5. Close the dialog
6. Observe: Blank screen appears and persists, blocking interaction

This issue severely impacts user experience and appears to be a regression or oversight in Angular Material 18.2.14's dialog implementation.

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

Dialog should close cleanly without leaving any blocking overlays or blank screens. Users should be able to interact with the application immediately after dialog closure.

Actual Behavior

• First dialog open/close: Works correctly
• Second+ dialog open/close: Shows persistent blank screen overlay
• Blank screen blocks all user interaction
• No visible DOM elements causing the blockage
• Overlay containers show as properly cleaned up in developer tools

Technical Investigation

Extensive debugging reveals:

DOM State During Blank Screen

// Overlay container state (appears clean)
Container: {isEmpty: true, hasBackdrops: 0, hasDialogs: 0, hasPanes: 0}
Body classes: default-theme mat-app-background
Has cdk-global-scrollblock: false
Total dialogs in DOM: 0
Total backdrops in DOM: 0

Debugging Attempts Made

All of the following fixes were attempted without success:

1. Double-close prevention using isClosing flag
2. Stale DOM element cleanup in constructor/pre-close/post-close
3. Overlay container reset with style clearing and browser reflow
4. Emergency blocking element detection and removal
5. Document style reset (body, html, scroll blocking classes)
6. High z-index element scanning and hiding
7. Force browser repaints with display toggling
8. Comprehensive element scanning for invisible blocking elements

Key Finding

Despite all overlay containers showing as properly cleaned up (isEmpty: true, hasBackdrops: 0, hasDialogs: 0) and no blocking DOM elements being detected, the
blank screen persists. This indicates the issue is within Angular Material's internal dialog management system, not at the DOM level.

Code Example

// Basic dialog usage that reproduces the issue
export class MyComponent {
constructor(private dialog: MatDialog) {}

openDialog() {
  const dialogRef = this.dialog.open(MyDialogComponent, {
    width: '400px',
    data: { message: 'Test dialog' }
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('Dialog closed');
    // Blank screen appears on second+ close
  });
}

}

Logs During Issue

[MODAL DEBUG 2] Running post-close overlay reset
[MODAL DEBUG 2] Emergency blank screen fix - checking for blocking elements
[MODAL DEBUG 2] No blocking elements found
[MODAL DEBUG 2] Force resetting empty overlay container 0
[MODAL DEBUG 2] Overlay system reset completed
[MODAL DEBUG 2] Document styles reset completed
[MODAL DEBUG 2] === BLANK SCREEN DIAGNOSTIC ===
[MODAL DEBUG 2] Container 0: {isEmpty: true, hasBackdrops: 0, hasDialogs: 0, hasPanes: 0}
// Blank screen persists despite clean state

Impact

• Severity: High - Breaks user workflow

• Frequency: Consistent on second+ dialog interactions

• Workaround: Page refresh required to clear blank screen

• User Experience: Application appears frozen/broken

• Issue appears to be related to Angular Material's CDK overlay system

• Problem persists across different dialog configurations

• Identical DOM cleanup logs between working (first) and broken (subsequent) dialogs

• Suggests internal state corruption within Angular Material's dialog management

Potential Root Causes

Based on investigation, likely causes include:

1. Animation/transition timing bugs in CDK overlay system
2. Internal state corruption in MatDialog service
3. Browser rendering pipeline issues during dialog transitions
4. Race conditions in overlay disposal process

Environment

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

[adolgachev]

This does appear to work correctly at https://material.angular.dev/components/dialog/examples.

Can you please provide a stackblitz with a reproducible example? It looks like you have a specific usage of this case in which it fails?