bug: page transition slides over menu when visible on larger screen

[jaminm]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

On an iPad if you have a split pane and are using the ion-router-outlet and issue a push command in Vue, it used to just animate the router page area of the screen but now the transition slides over the entire screen including the menu. The web and android tablet builds only have a transition animation in the page section (they move up and down), it is just iPad builds that navigate over top of the menu as it pushes towards either the left or right.

Expected Behavior

This really should only transition between the two pages and not push the view over top of the menu.

Steps to Reproduce

1. Have a split-pane project in vue with a menu using ion-router-outlet
2. Make two views and navigate from one view to the other using a push command

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/opt/homebrew/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 7.6.1

Capacitor:

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

Utility:

cordova-res : not installed globally native-run (update available: 2.0.0) : 1.7.4

System:

NodeJS : v20.8.0 (/opt/homebrew/Cellar/node/20.8.0/bin/node) npm : 10.2.5 OS : macOS Unknown

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[alexdabast]

@jaminm is this your bug ? https://stackblitz.com/edit/stackblitz-starters-aq7wc4?file=src%2Fmain.ts I have the same since I migrated to angular 17 @liamdebeasi my stackblitz reproduce the behavior mentioned by @jaminm

[liamdebeasi]

Thanks! I can confirm this is a bug.

[liamdebeasi]

Here's a dev build if you are interested in testing a proposed fix: 7.6.3-dev.11703103144.148eb1f6

Install example: npm install @ionic/angular@7.6.3-dev.11703103144.148eb1f6

[alexdabast]

@liamdebeasi thank you I tried the fix and it works fine for me now When should this go live ?

[jaminm]

@jaminm is this your bug ? https://stackblitz.com/edit/stackblitz-starters-aq7wc4?file=src%2Fmain.ts I have the same since I migrated to angular 17 @liamdebeasi my stackblitz reproduce the behavior mentioned by @jaminm

Yes that's it exactly.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/28745, and a fix will be available in an upcoming release of Ionic Framework.

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