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

[bitflower]

Bug Report

Ionic version:
[x] 5.5.6

Current behavior:
Stacking modals in ionic/[email protected] 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

#20800

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

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. This is intentional as pushing many modals would cause the content behind the modal to become very dark otherwise. To disable this behavior, you can set --backdrop-opacity to a non-zero value as mentioned in #23278 (comment).

[bitflower]

Hi guys, thanks for the quick reply. Just tried and while it solves the covering of the previous modal content it doesn't for the shadow on the 2nd modal box. The 2nd issue also persists: the shadow in the previous modal gets lost. See the result:

Just let me know if this an edge you maybe think of solving. If so I could get my hands dirty and try to provide a PR. If not I'll probably solve it "locally".

Thanks!

[liamdebeasi]

Thanks for the follow up. So we typically work under the assumption that stacked modals are the same size and only show the shadow on the first modal, otherwise you would run into the same problem as with stacking the backdrops. The solution here is to set the --box-shadow var on the small modal as well.

Here are the exact values we use for MD mode:

--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);

[bitflower]

Wow, @liamdebeasi I'm impressed! I'll see what I can come up with for the docs to represent this. As a minimum contribution!

[bitflower]

Here you go: #23279

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.