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?

[n-chafik]

I'm experiencing a similar issue: the modal appears to close visually, but the overlay remains in the DOM, preventing the user from interacting with other elements on the page. I’ve noticed this only happens when I call the close() method inside a subscription. Example:

someService.saveSomething(...)
  .subscribe(() => {
    this.dialog.close();
  });

To work around this, I tried moving the close() call into the finalize() operator, and that seemed to help:

let isErrorSaving = false;

someService.saveSomething(...)
  .pipe(
    finalize(() => {
      if (!isErrorSaving) {
        this.dialogRef.close();
      }
    })
  )
  .subscribe({
    next: () => {
      // handle success
    },
    error: () => {
      isErrorSaving = true; // optional: prevents closing the modal if something went wrong
    }
  });

This workaround reduces the issue, but I still encounter it occasionally. It's hard to reproduce the bug consistently after applying this fix. Still interested if someone find a more consistent solution :)

[faizanazim11]

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?

I think the issue persists more often when using inspect mode instead of normal workflow. Can you try with inspect mode open.

[uncleGera]

I’m running into a similar issue. When Chrome DevTools are open and I open the dialog, it shows empty content and the overlay appears more transparent than it should until I resize the window. After resizing, both the overlay and the dialog content render correctly. If DevTools are closed, everything works as expected. What’s strange is that this bug started occurring after I added a second component inside . Unfortunately, I can’t share the code or create a StackBlitz, as it most likely won’t be reproducible with a different set of components inside the dialog. I’m not sure whether it’s related to my component, but the fact is that having Chrome DevTools open affects the behavior, while my component itself works fine.

[ffredhansen]

@uncleGera unfortunately I have the same issue in v19.2.14. No error is shown, just the overlay. If the window is resized the dialog shows up. Some instances of the same dialog show up for some reason and some don't. No issue in Firefox.

This stackoverflow post is also about the same issue.