Ionic4 page transition too slow

Ionic Framework
1

Hi,

i am facing problems with the page transition when coming from a page that has multiple toolbars with segments to a page that also has mutliple toolbars (but one more than the page before).

Head of Page 1 (a tabbed page):

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-buttons slot="end">
            <ion-button (click)="updateContent()">
                <ion-icon slot="icon-only" name="refresh"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title>{{ 'REPORTER' | translate }}</ion-title>
    </ion-toolbar>
    <ion-toolbar no-border-top>
        <ion-segment [(ngModel)]="reporterFilter">
            <ion-segment-button value="all">
                {{ 'ALL' | translate }}
            </ion-segment-button>
            <ion-segment-button value="unconfirmed">
                {{ 'UNSEEN' | translate }}
            </ion-segment-button>
        </ion-segment>
    </ion-toolbar>
</ion-header>

Head of Page 2 (opened from the tab page):

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button text=""></ion-back-button>
        </ion-buttons>
        <ion-buttons slot="end">
            <ion-button
                    (click)='navigate(reporterDetailResponse.street + ", " + reporterDetailResponse.postcode + ", " + reporterDetailResponse.city)'>
                <ion-icon slot="icon-only" name="navigate"></ion-icon>
            </ion-button>
            <ion-button (click)="presentFilter()">
                <ion-icon slot="icon-only" name="options"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title>{{'SINGLEREPORTER' | translate}}</ion-title>
    </ion-toolbar>

    <ion-toolbar>
        <ion-segment [(ngModel)]="segmentAnlagenDetail">
![ezgif-3-9cf88866f761](https://user-images.githubusercontent.com/49471647/55857796-5dd0b580-5b6e-11e9-95a1-fbf9440dfc20.gif)


            <ion-segment-button value="alarms">
                {{ 'ALARMS' | translate }}
            </ion-segment-button>
            <ion-segment-button value="comments">
                {{ 'COMMENTS' | translate }}
            </ion-segment-button>
        </ion-segment>
    </ion-toolbar>

    <ion-toolbar no-padding>
        <div class="filter-item filter-caption">{{'FILTER'| translate}}:</div>
        <div *ngFor="let level of getExcludedLevel()">
            <ion-badge class="filter-item" (click)="removeLevel(level)">{{level.name | translate}}</ion-badge>
        </div>
        <ion-badge class="filter-item" *ngIf="fromDate" (click)="removeDate()">
            <ion-icon name="calendar"></ion-icon>
        </ion-badge>
        <ion-badge class="filter-item" *ngIf="userOnly" (click)="removeUserOnly()">
            <ion-icon name="person"></ion-icon>
        </ion-badge>
    </ion-toolbar>

</ion-header>

So my problem is the following:

  • when changing from page 1 to page 2 the first list item of the content from page 1 is shown in the third toolbar of page 2 while animating (fading in/fasding out).
  • when changing back to page 1 from page 2 the third toolbar ist shown in the first list item …
2

That overlapping may be because of the transparency issue. Please set color to ion-header and try.
Reg transition, Are you usign debug buid?

3

I am building with xcode and running on a device.

If i add a color to the header the problem is the same - the text overlaps the list item.

4

Just tested a bit more with a background color in ion-header but this does not solve the problem. The content of the third toolbar just fades out too slow.

5

I also ran into this issue. There is this topic related to it but the new Ionic core version didn’t work better for me : https://github.com/ionic-team/ionic/issues/16262 , maybe it can help you.

I still have this slow transition on IOS.