bug: Collapsible ion-titles disappear from ion-header Toolbar

[chrissehic]

Bug Report

Ionic version:
[x] 5.1.0

Current behavior:
Large ion-titles nested in a collapsible ion-header (such as the example from the ion-toolbar ionic documentation) suddenly disappear after navigating to a sub-page and coming back from that page, leaving only the toolbar, slot=start buttons, and slot=end buttons.

Expected behavior:
Large ion-titles nested in a toolbar from a collapsible ion-header should still be visible even after navigating to another page and coming back from that page.

Steps to reproduce:
Set a collapsible header with a toolbar in a tab page following ionic documentation at "https://ionicframework.com/docs/api/toolbar" and the source code at "https://github.com/ionic-team/ionic-docs/blob/master/src/demos/api/toolbar/index.html".
Place a button-type div or ion-item content in the said page.
Build App via Capacitor with ionic cap open android to Android Studio.
Navigate to a sub-page and navigate back to parent page.
Large ion-titles from all tab-bar pages are not visible anymore.

Related code:

A sample application via GitHub:
https://github.com/roccosiffredi/Large_ion-icon_Bug

Sample code:

<ion-header mode=ios [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header mode=ios collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>

<ion-item type=button (click)="openContent()">
      <ion-avatar slot="start">
        <!-- <img src="./avatar-yoda.png"> -->
      </ion-avatar>
      <ion-label>
        <h2>Yoda</h2>
        <h3>Size matters not</h3>
        <p>Do or do not. There is no try...</p>
      </ion-label>
    </ion-item>
  </ion-list>

</ion-content>

Other information:

Ionic info:

   Ionic CLI                     : 6.5.0 (C:\Users\Christopher\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.1.0
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.2
   @capacitor/core : 2.0.2

Utility:

   cordova-res : not installed
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.2
   @capacitor/core : 2.0.2

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   NodeJS : v12.9.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.10.2
   OS     : Windows 10

[ionitron-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 provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

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

[chrissehic]

Issue still present

[liamdebeasi]

Hi @RoccoSiffredi,

Can you please provide a repo with the code required to reproduce the issue?

[liamdebeasi]

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

[chrissehic]

IMPORTANT: This seems to be triggered when the fourth item in the ion-list is visited and after having refreshed the page.

Steps related to the specific reproduction provided are as follow:

• Start the app using ionic serve
• Scroll to activate collapsable header.
• Title "Tab 1" is shrinked to smaller size but still apparent.
• Open ion-items entitled "CLICK ME" that are nested in an ion-list.
• This brings to content page entitled "extras".
• Navigate back to Home Page.
• The "Tab 1" is either shrinked to smaller size or is not apparent anymore.