Styling issue of toolbar after entering new page

Ionic Framework
1

Hi,

i’m trying to build an app with Ionic 6 (Angular, Tabs-App). I am facing a weird problem with the toolbar. After routing to another page, the toolbar styling applies just a few seconds after the page is loaded. I have recorded this behaviour: RPReplay Final1648194229 GIF | Gfycat

Does anyone have a solution for this problem? I couldn’t find anything about this topic.

Thanks in advance!
Adrian

2

What does your code look like? I had a similar issue and needed to add a second IonToolbar.

3

Hey,

thanks for your reply.
At first I edited the tabs-routing.module.ts:

Bildschirmfoto 2022-03-25 um 18.12.42
Bildschirmfoto 2022-03-25 um 18.12.421790×1060 104 KB

Maybe there is an issue because i implemented the target pages (camp-detail) as a children of one of my tab pages (festivals)? But i also tried it with pages on the “top level” and the same issue occured.

My link is a simple button:

<ion-button [routerLink]="['/camp-map']">Go to detail</ion-button>

The target page looks like this:

<ion-header [translucent]="true">
  <ion-toolbar color="light">
    <ion-title>Karte</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div id="map" #map></div>
</ion-content>

I’m also using the toolbar with condensed header in combination with an parallax header image. the issue occurs there as well:

<ion-header class="ion-no-border">
  <ion-toolbar color="light">
    <ion-buttons slot="start">
      <ion-back-button fill="clear" text="" color="primary"></ion-back-button>

    </ion-buttons>
    <ion-title>{{ data.name }}</ion-title>
    <ion-buttons slot="end">
      <ion-button fill="clear" shape="round" color="light">
        <ion-icon slot="icon-only" name="share-outline" color="primary"></ion-icon>
      </ion-button>
      <ion-button fill="clear" shape="round" color="light">
        <ion-icon slot="icon-only" name="search-outline" color="primary"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" scrollEvents="true" (ionScroll)="onScroll($event)" [appParallax]="img">
  <div #img class="header-image" [style.background-image]="'url(' + data?.img + ')'"></div>
  <ion-header collapse="condense" class="ion-no-border">
    <ion-toolbar color="transparent">
      <ion-title size="large">{{ data.name }}</ion-title>
    </ion-toolbar>
  </ion-header>
    ...
</ion-content>

Does this look similar to your issue?

4

Hmmm…not sure on this one. My issue was that I had my IonSegment outside of the IonToolbar. I had to wrap my segment with another toolbar to fix it.