Navigating from page that doesn't have app-header to one which does animation issue

Ionic Framework
1

I am having a visual issue when navigation from a page that doesn’t have an app-header to a page which does have an app-header.

During the navigation transtition i see a quick white flash of a “non-existing” app-header on the first page. I think it tries to animate this but i don’t want this.

Any ideas?

2

Can you show the code of the two pages and an video of how it looks?

3

First page:

<ion-content [fullscreen]="true" [forceOverscroll]="false">
  <div class="container">
    <ion-header class="ion-no-border">
      <ion-icon src="/assets/svg/logo.svg" class="logo"></ion-icon>
    </ion-header>
    <div class="fixed-bottom">
      <div class="button-container">
        <ion-button [routerLink]="['/admin/login']" class="wide solid-primary"
          >professional login</ion-button
        >
      </div>
    </div>
  </div>
</ion-content>

Second page:

<ion-header class="ion-no-border" mode="ios">
  <ion-toolbar mode="ios" class="branded">
    <ion-buttons slot="start">
      <ion-thumbnail (click)="goBack()">
        <ion-icon src="/assets/svg/arrow-left.svg"></ion-icon>
      </ion-thumbnail>
    </ion-buttons>
    <ion-title>
      <ion-icon src="/assets/svg/logo.svg" class="logo"></ion-icon>
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" [forceOverscroll]="false">
  <div class="form-container">
    <h1>Hi, Welkom</h1>
    <p>Enter the next level of beauty.</p>
    <form>
      <ion-input
        class="ae"
        placeholder="E-mail of gebruikersnaam"
        required="true"
      ></ion-input>
      <ion-input
        class="ae"
        placeholder="Wachtwoord"
        type="password"
        required="true"
      ></ion-input>
      <div class="forgot">
        <ion-button [routerLink]="'/admin/forgot-password'"
          >Wachtwoord vergeten?</ion-button
        >
      </div>
    </form>
  </div>
  <div class="fixed-bottom">
    <div class="button-container">
      <ion-button class="wide solid-primary">professional login</ion-button>
    </div>
  </div>
</ion-content>

Gif:

ezgif-4-5f5a505dba

4

Thank you! First: I believe the IonHeader in the first page is wrongly placed. The header is a specific page layout element, which should be only used as in the second page or for a large header title.

But i don’t think this is causing the issue, but maybe worth trying out removing the header there.

5

Thanks for your response.

I removed the app-header in the first page. No luck. The animation is still there.