bug: Page ion-header delays when using multiple ion-toolbar or when ion-header height doesn't match with next page

Bug Report

Ionic version:

[x] 4.9.1

Current behavior: When going to any page and going back to previous page, if the ion-header isn’t the same height, it leaves items like a watermark for couple of seconds.

Expected behavior: The transition should be smooth. It shouldn’t be any delay hiding perivous page items.

Steps to reproduce: Going to any page and clicking the back button to go back to the previous page.

Page 1

<ion-header class="ion-padding" no-border>
    <ion-toolbar>
        <ion-searchbar showCancelButton="never"></ion-searchbar>
    </ion-toolbar>
</ion-header>

Page 2

<ion-header class="ion-padding" no-border>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/category" color="dark"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
    <ion-toolbar>
      <ion-searchbar showCancelButton="never"></ion-searchbar>
    </ion-toolbar>
</ion-header>

Ionic Info:

   Ionic CLI                     : 5.2.7
   Ionic Framework               : @ionic/angular 4.9.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Utility:

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

System:

   NodeJS : v10.16.2 (C:\Program Files\nodejs\node.exe)
   npm    : 6.10.3
   OS     : Windows 10

Other information: I found this link: https://github.com/ionic-team/ionic/issues/16262 It is the same bug that marked as resolved.

Why is this happening? This is only happening because one of the ion-header’s height larger than other because I am putting multiple ion-toolbar and/or multiple line items.

As you see in the second GIF, I only have one item in the ion-header which is the search input. However, on the first GIF, I two items. Both of them are toolbars.

• Ignore the second back icon, I was doing tests

[etonyali]

Thank you. Removing padding did fix it. I just figured out that this only happens when I add padding or margin to top in ion-header

[liamdebeasi]

Thanks for the follow up. It looks like the gap was appearing because you have the ion-padding class added to your ion-header components. Can you try removing that and let me know if that resolves your issue?