bug: IOS large title overlaps with back button

[3adeling]

Bug Report

Ionic version:
[x] 5.0.0

Current behavior:
when navigating for the first time from one on the tabs to child page and then click the back button the problem doesn't occur. but if you after that moved to another tab and navigate from it to a child page you will see the title of the first tap overlaps with the current child back button.

Expected behavior:
first tab title should not appear in a child page of another tab

Steps to reproduce:

1 - from tab 1 click on the button which will navigate to details-page 1 then go back to tab1
2 - go to tab 2 and click on the button which will navigate to details-page 2, after that click on back-button now you will notice that tab 1 large title overlaps the tab2 header then it will disappear

Related code:

Github(https://github.com/3adeling/ionic-5-header-title-issue)

Ionic info:

Ionic:

   Ionic CLI                     : 6.0.2 (C:\Users\adela\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.0.0
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.1.2

Capacitor:

   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.5.0

Utility:

   cordova-res : 0.9.0
   native-run  : not installed

System:

   NodeJS : v12.14.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.13.6
   OS     : Windows 10```

[liamdebeasi]

It looks like this is happening with the following route setup:

/tabs/tab-one --> /child

Leaving the tabs context causes app-tabs/ion-tabs to be considered the "leavingEl". This causes the framework to incorrectly select the leaving large title. For example when on Tab 2, it will (incorrectly) select the title for Tab 1; however, since Tab 1 is hidden, its dimensions will all be 0 so the animating large title will also be in the wrong location.

The following route setup does not cause the issue because only tab-one is considered the leavingEl, not the entire tabs context:

/tabs/tab-one --> /tabs/child

I will look into a fix for the issue and will post an update here when I have more to share. Thanks!

[3adeling]

Thanks @liamdebeasi

as a workaround, instead of:

    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>

you can use:

<ion-back-button slot="start"></ion-back-button>

without <ion-buttons> wrapper. it won't do the same behavior but at least it won't show wrong title label.

[liamdebeasi]

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

npm i @ionic/angular@5.1.0-dev.202002191712.5b19395

[3adeling]

@liamdebeasi yes it resolves the issue. Thanks for your efforts.

[liamdebeasi]

Glad to hear the issue is fixed. I am going to keep the issue open until I merge the fix in. Thanks!

[liamdebeasi]

Thanks for the issue. This has been resolved via #20555 and 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.