Ionic4 page transition too slow

@shorstmann wrote:

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 …

I have added a gif for you.

55857824-7345df80-5b6e-11e9-8a8c-9b22132418be.gif600×1067

Posts: 1

Participants: 1

Read full topic