bug: navigation inside of ion nav is buggy

[EinfachHans]

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

Navigation in a <ion-nav> inside a Modal appears to be very buggy for me:

1. The IonTitle of the root page animates wrong -> To the bottom of the side
2. The entering of the next page is buggy and stucks a short time in the animation

Expected Behavior

The animation should work without bugs 😃

Steps to Reproduce

See attached Repo:

1. Open Modal
2. Navigate forward (buggy enter animation)
3. Navigate back via click or swipe (buggy leave animation)

Code Reproduction URL

https://github.com/EinfachHans/ionic-modal-nav-bug

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (/Users/hans/.nvm/versions/node/v16.14.2/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.1.15
@angular-devkit/build-angular : 14.1.0
@angular-devkit/schematics : 14.1.0
@angular/cli : 14.1.0
@ionic/angular-toolkit : 6.1.0

Capacitor:

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

Utility:

cordova-res (update available: 0.15.4) : 0.15.1
native-run : 1.6.0

System:

NodeJS : v16.14.2 (/Users/hans/.nvm/versions/node/v16.14.2/bin/node)
npm : 8.6.0
OS : macOS Monterey

Additional Information

No response

[sean-perkins]

@EinfachHans thanks for reporting this issue!

This appears to work in 6.1.14, but broke in 6.1.15. We will classify this as a bug and figure out what caused the regression.

[sean-perkins]

@EinfachHans If you update your example template for modal.component.html to:

<ion-content>
  <ion-nav [root]="root"></ion-nav>
</ion-content>

This will solve the problem in your project. The change to support custom sized dialogs affects implementations of modal that don't use ion-content. Discussing with the team of the best options here. Ideally we would like to recommend developers use the template sample provided above when using ion-nav in a modal, but this may also cause issues with existing applications built without it.

[liamdebeasi]

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

[EinfachHans]

Works, thank you! 😊

[liamdebeasi]

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