bug: iOS card modal over card modal backdrop issue

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

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

The sheet modal on iOS has a backdrop natively, but when you add this and show 2 or more modals over each other (modal over modal) the backdrop gets a bit of the glitch.

I know that by default the backdrop is removed in Ionic. But since we have a light background, this just isn’t an option for us, it just seems to connect too much with the background). So I’m looking for a solution or a workaround.

Expected Behavior

Only show backdrop of top layer modal

Steps to Reproduce

1. Create a card modal and then another one with that previous modal as presentingElement
2. Add backdrop opacity to modal

ion-modal::part(backdrop) {
    opacity: 0.3;
}

Code Reproduction URL

https://github.com/SaroGFX/modal-over-modal.git

Ionic Info

Ionic:

Ionic CLI : 6.19.0 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.0.13

Capacitor:

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

Utility:

cordova-res : 0.15.4 native-run : 1.5.0

System:

NodeJS : v16.14.0 (/usr/local/bin/node) npm : 8.3.1 OS : macOS Monterey

Additional Information

Created demo - see repo

[SaroGFX]

You’re right @liamdebeasi , thanks for the info. Refactored it a bit and all is happy with the result. Cheers

[ionitron-bot[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.