bug: Switching between card modal & "regular" modal when modal is still open causes page behind it to remain in card modal state

[ijsje71]

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.x

Current Behavior

Currently I have an implementation of the modals where we use card modals in our iOS app. For accessibility reasons, we've recently enabled landscape mode for our app. Since card modals are very small in landscape mode, I want to only include the presentingElement on the modal when the screen is in portrait mode. I am doing this by setting a presentingElement state variable to null, which in turn sets the presentingElement property on undefined in the inline modal. That last part is only necessary since presentingElement only accepts an HTML element or undefined and not null.

When the modal is opened, it regularly opens like a card modal as expected. When you turn your device, the modal changes into a full screen "regular" modal. When you close the full screen modal, however, the page behind it (which was used as the presentingElement) is still "boxed" in because of the remnants of the card modal animation in the background. This can only be reversed by opening the modal as a card modal again and closing it. The result looks like this:

While I expect the page to look like this:

Expected Behavior

I would expect the page behind it to return to its regular state when the presentingElement is no longer set on the inline modal and the page to return to the full width/length of the device.

The flipping of modals from card modals to full screen modals is a pattern that can be observed in more iOS apps, so should not be very niche. Whatsapp for instance behaves this way in every "New" dialog (such as creating a new chat), when opening the new chat card modal and flipping your device, it will turn into a full screen modal.

Steps to Reproduce

1. Clone the repo, install the dependencies and open the simulator (or connect your own device and deploy it on there)
2. In Portrait mode, click the blue OPEN MODAL button.
3. See the card modal open
4. Now flip your device to landscape mode (any side is fine)
5. See the full screen modal replace the card modal
6. Now close the modal using the blue "CLOSE MODAL" button
7. See the bugged screen behind it

To revert it back, do the following:

1. Flip your phone back to portrait mode (upside down is turned off, so only "regular" portrait works)
2. Notice that the page is still looking bugged (!!!)
3. Now open the modal again using the button
4. See the card modal appear
5. Click the CLOSE MODAL button
6. Notice that the page returns to normal
7. Flip the phone again
8. Notice that the page remains full screen.

Code Reproduction URL

https://github.com/ijsje71/bug-switching-card-modal-and-regular-modal#

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.5.1

Capacitor:

Capacitor CLI : 7.1.0
@capacitor/android : not installed
@capacitor/core : 7.1.0
@capacitor/ios : 7.1.0

Utility:

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

System:

NodeJS : v22.14.0
npm : 10.9.2
OS : macOS Unknown

Additional Information

Since the buggy screen still appears when the modal is closed & the phone is flipped and it's fixed when the modal is opened and closed, it seems that it's related to something not reverting the presentingElement when the dismiss is not called on the modal while the presentingElement is still there.

Hopefully a fix can be implemented that allows us to keep the modal open, as seen on other applications like the one I mentioned in the expected behaviour section.