bug: `IonModal` with `presentingElement` doesn't render on iOS

[oleksandr-danylchenko]

Describe the Bug

When using the "Card modal" component, we noticed that it doesn't render its content after switching the viewport orientation back and forth:

https://github.com/ionic-team/ionic-docs/assets/68850090/63cfd525-0575-4f3c-90e4-4c116b0a0972

Unfortunately, using the "Layers" tool I didn't notice any irregularities:

However, the issue doesn't happen if you rotate the device with the opened modal:

https://github.com/ionic-team/ionic-docs/assets/68850090/d8c65b17-724f-4432-9c83-c0eb584c984f

Or you don't open the modal in the horizontal view:

https://github.com/ionic-team/ionic-docs/assets/68850090/776fabd1-5be8-423a-9b79-eb17bf2187fe

---

Moreover, the issue doesn't happen at all when the presentingElement is removed from the IonModal, thus removing the "Card effect":

https://github.com/ionic-team/ionic-docs/assets/68850090/bcfd3c2d-04c4-4814-b276-e1df9e5037c5

Expected Behavior

The modal is consistently opened and rendered both in the vertical and horizontal modes. Prior openings of the modal shouldn't impact its rendering in the following ones. In short: should work like in the docs and demos 👌🏻

Steps to Reproduce

This bug can be reproduced using the official "Card Modal" example:

1. Open the example in Stackblitz
2. Open the preview in a new tab
3. Enable mobile view testing
4. Choose an iPhone device
5. Vertical Open -> Close
6. Rotate the view
7. Horizontal Open -> Close
8. Rotate the view
9. Vertical Open

Then you'll see that the modal's content isn't rendered.

The issue happens not only on the Web but on real iOS devices as well.

Operating System

Macbook Pro, M1 2021, MacOS Sonoma 14.0

Browser

Chrome

Version

117.0.5938.149

[mapsandapps]

Thank you for the bug report. I can reproduce this and can confirm that this is a bug in Ionic Framework. The opacity is not getting properly set in some cases when the modal opens.

[mapsandapps]

Thank you for your bug report! The bug has been resolved in #28907 and will be released in an upcoming version of Ionic Framework.

Here is a dev build if you would like to test the fix: 7.6.8-dev.11706715287.1950fa40

[oleksandr-danylchenko]

Thank you so much for picking this bug up!

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