bug: stacked modals missing backdrop and box-shadow (incl. repro)

Bug Report

Ionic version: [x] 5.5.6

Current behavior: Stacking modals in ionic/core@5.6.6 I’m having issue with the backdrop and box-shadow of the 2nd modal. In my case it’s a “confirm dialog” on top of a “file gallery”. Looking at the HTML layering and CSS architecture all seems fine. z-indexes are in place just right. This is how it looks like:

I was able to fake the box-shadow on the small modal. But still I’m missing the covering effect of the backdrop over the 1. modal content. The rendered DOM:

When I move the 2nd modal up in the DOM in the DevTools I get a bit closer but losing the shadow in the “big” modal:

Outcome:

I fiddled with all kinds of z-index variations without luck.

Expected behavior:

• modal 1 is covered with backdrop of modal 2
• modal 2 has box-shadow

Steps to reproduce: See repo: https://github.com/bitflower/modal-test

npm i npm start

Click button “Open Profile in Modal” Click button “Delete”

Related code: https://github.com/bitflower/modal-test

Ionic info:

This is a pure Stencil app. No framework. I never use the CLI hence the version below doesn’t matter.

Ionic:

   Ionic CLI : 5.4.16

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.8.0
   npm    : 6.14.11
   OS     : macOS Catalina

[DwieDima]

this was added on purpose, heres the issue

https://github.com/ionic-team/ionic-framework/issues/20800

you can add backdrop opacity by providing --backdrop-opacity: 0.3; to your modal.

[bitflower]

Here you go: https://github.com/ionic-team/ionic-framework/pull/23279