Ionic-framework: bug: incorrect large ion-title placement inside modal navigation using ion-nav

[DwieDima]

Bug Report

Ionic version:


[x] ^5.0.4

Current behavior:

When you try navigating inside modal by using ion-nav, the placement of large ion-title is incorrectly aligned

Link to video

Expected behavior:

Large title transition on forward and back navigation should align correctly
Steps to reproduce:

1. create a page which holds the ion-nav component and expects the component as input in .html file

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

1. set in the .ts file an input property for the component

@Component({
  selector: 'app-modal-outlet',
  templateUrl: './modal-outlet.page.html',
  styleUrls: ['./modal-outlet.page.scss'],
})
export class ModalOutletPage implements OnInit {

  @Input() component;

  constructor() { }

  ngOnInit() {}
}

1. create the modal using modalController in app.component.ts

  public async onOpenModal() {
    const modal = await this.modalController.create({
      component: ModalOutletPage,
      componentProps: { component: Test2Page },
    });
    return await modal.present();
  }

Link to repo

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.4
   @angular-devkit/build-angular : 0.900.5
   @angular-devkit/schematics    : 9.0.5
   @angular/cli                  : 9.0.5
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Utility:

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

System:

   NodeJS : v12.16.0 (/usr/local/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina

[liamdebeasi]

Thanks for the issue. I am unable to reproduce the issue using the repo provided. Can you provide some steps to reproduce the issue?

[DwieDima]

Thanks for the issue. I am unable to reproduce the issue using the repo provided. Can you provide some steps to reproduce the issue?

1. run npm i
2. run ionic serve
3. toggle device toolbar in chrome browser
4. switch device to iPad
5. refresh tab to get ios view
6. click on "NESTED NAVIGATION LARGE TITLE BUG" in the menu bar, when split-pane is visible (should be on ipad view)
7. try some navigation there

Sorry for bad description. The bug does not appear in mobile view, only tablet.
I also posted a video link of this issue.

[liamdebeasi]

Thanks for the follow up. Can you try the following dev build and let me know if it resolves the issue?

npm i @ionic/[email protected]

[DwieDima]

Now it's working perfectly!
Thank you @liamdebeasi for fast support.

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