bug: Backdrop only visible for first modal

[fudom]

Prerequisites

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

Ionic Framework Version

v8.x

Current Behavior

It seems that the backdrop of e.g. modal is only visible for the first modal. This makes neasted modals look confusing. It's not about fullscreen modals.

Expected Behavior

In ealier versions the backdrops were visible for each modal. I guess this has been changed, because multiple modals with each have it's own backdrop visible, leads to darker and darker background (up to black).

But I would rather show the last backdrop and not the first one. Otherwise, the nested modals are on top of each other and it is difficult to see what the topmost modal is.

My current workaround is:

ion-modal.modal-default.show-modal:last-of-type {
  // I set --ion-backdrop-opacity in variables theme dependent.
  --backdrop-opacity: var(--ion-backdrop-opacity, 0.33) !important;
}

Steps to Reproduce

1. Create modals; not fullscreen; different sizes.
2. In a modal, open another.
3. See that the backdrop is only visible on the first modal. Not on the second one.

Code Reproduction URL

https://codepen.io/fudom/pen/zYVLXxO

Ionic Info

No Ionic repo (no ionic info available). But it does not matter in this case. I use Angular with Ionic 8.2.x. But see CodePen too.

Additional Information

With my workaround and proposal, you see this effect.

Before	After

@liamdebeasi cc

[liamdebeasi]

Hi,

I don't work for Ionic anymore, so you don't need to tag me. However, I will note that this behavior is intentional. Without it, the modal backdrop would get progressively darker as more modals stacked on top of each other. This is most noticeable on tablet viewports with modals that are the same size.

[fudom]

Ok, I was just wondering why there hasn't been any activity lately and thought I'd reach out to you since I believe you implemented it. I have already noticed some changes in the project. It's probably just winding down. Anyway...

Yes, the background gets darker with each stacked modal. However, this is only a problem if you have a lot of modals stacked, which is very rare in real apps. I would rather show the last backdrop, not the first one, otherwise it causes the problem shown in my first post. This cannot be intentional if modals can no longer be recognized.

[liamdebeasi]

There might be a way to make this behavior a prop or something that devs can toggle. You could check with the team and see if this is a feature they'd be willing to consider. If they are open to it, I think this could be a great community contribution if you're interested!

[tortuch611]

Is there any news? I'm still got the same issue.

ion-modal { --backdrop-opacity: var(--ion-backdrop-opacity, 0.4) !important; }