bug: Invisible overlay behind sheet modal on 8.7.4

[SteliosMoch]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.7.4

Current Behavior

I have a map page with a sheet modal, the map includes clickable markers and buttons. After I updated "@ionic/angular" to "8.7.4" I cannot press anything behind the sheet modal.
On chrome inspect there's a there's an overlay that doesn't let me click anything behind my modal.
If I remove the modal I can then press the buttons.

Expected Behavior

I expect to be able to press my buttons and markers behind the sheet modal, like on version "8.7.3"

Steps to Reproduce

1. Install an Ionic Angular project
2. Add a sheet modal according to the documentation.
3. Add clickable items on the page.
4. Try to press the buttons that are behind the sheet modal.

Code Reproduction URL

https://github.com/SteliosMoch/modal-overlay-test

Ionic Info

Ionic:

Ionic CLI : 7.2.1 (/Users/stelios/.nvm/versions/node/v22.18.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.7.4
@angular-devkit/build-angular : 19.2.17
@angular-devkit/schematics : 19.2.17
@angular/cli : 19.2.17
@ionic/angular-toolkit : 12.3.0

Capacitor:

Capacitor CLI : 7.4.3
@capacitor/android : 7.4.3
@capacitor/core : 7.4.3
@capacitor/ios : 7.4.3

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v22.18.0 (/Users/stelios/.nvm/versions/node/v22.18.0/bin/node)
npm : 10.9.3
OS : macOS Unknown

Additional Information

No response

[petrot]

Same here, I opened a modal form, and after save/close the modal, the parent list page is "disabled"..

[ggarg2]

I’m facing the same issue.

When I open a modal and then close it using @ViewChild reference, the screen gets stuck — I can’t scroll or tap anywhere.

@ViewChild('customModal') customModal: IonModal;

if (this.customModal?.isCmpOpen) {
  await this.customModal?.dismiss();
}

However, if I close the modal with typescript modalController.dismiss(), the stuck screen issue does not occur.

[poserr]

Same for ionic/react after upgrading from 8.7.3 to 8.7.4

after opening and closing any ion-modal the main content section of ion-page becomes unusable (no click/scroll events), only tab bar is responsive, so I guess the issue has something to do with backdrop/overlays

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[ShaneK]

I've tried reproducing this but I can't seem to. A good place to start with a reproduction would be the Ionic Framework documentation on the modal page, going to a Stackblitz, then changing it to what needs to be changed to reproduce the errors. After you've reproduced it, save your fork and post it here.

Does it only happen when run natively? Does it only happen with Angular? Are you passing other parameters to your modal?

[SteliosMoch]

I've tried reproducing this but I can't seem to. A good place to start with a reproduction would be the Ionic Framework documentation on the modal page, going to a Stackblitz, then changing it to what needs to be changed to reproduce the errors. After you've reproduced it, save your fork and post it here.

Does it only happen when run natively? Does it only happen with Angular? Are you passing other parameters to your modal?

I created a repo for reproduction: https://github.com/SteliosMoch/modal-overlay-test

This problem happens both on my device, Samsung Galaxy S25 and on browser with 'ionic serve' command.

[poserr]

I finally reproduced my issue and it linked with conditional rendering of IonModal component where isOpen is fixed to true. I would agree that fixing isOpen={true} it is probably not the best approach, but tests did not show any problems with version <= 8.7.3.

8.7.3 : https://stackblitz.com/edit/cst7dxnw-chwt1ajr?file=src%2FPage1.tsx
8.7.4 : https://stackblitz.com/edit/cst7dxnw-inpgicbw?file=src%2FPage1.tsx