bug: ion-nav transitions are broken in react

[sean-perkins]

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

Starting in 6.1.15, IonNav page transitions are incorrect.

The changes to support custom sized dialogs, introduced a change to the global stylesheet that is being applied in scenarios where IonNav is used within IonModal.

Problematic styles:

ion-modal .ion-page {
  position: relative;

  contain: layout style;

  height: 100%;
}

Expected Behavior

IonNav transitions should be consistent within a modal or outside of a modal.

Steps to Reproduce

1. Clone: https://github.com/milang/ionic-simplevitejs
2. Checkout branch: recursivemodalnav
3. npm install
4. npm run dev
5. Click "Open Modal"
6. Click "Push"
7. Observe the incorrect transition between views

Code Reproduction URL

https://github.com/milang/ionic-simplevitejs

Ionic Info

6.1.15+

Additional Information

Related to: #25677 (caused by the same change, but are effected differently between Angular and React).

[sean-perkins]

cc: @milang for visibility.

[liamdebeasi]

Here is a dev build if anyone would like test the fix: 6.1.16-dev.11658962095.1f24647d

[milang]

@liamdebeasi @sean-perkins I can confirm that development build 6.1.16-dev.11658962095.1f24647d works as expected in my environment. Thank you for the quick fix! I assume this fix should eventually be available in Ionic 6.2.1?

[liamdebeasi]

Thanks for the issue. This has been resolved via #25689, and a fix will be available in an upcoming release of Ionic Framework.

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