Pretty self explanatory from the images. I get this on iOS devices, roughly 40% of the time. It only happens on app launch, If I change tab and change back the list is displayed correctly and it doesn’t happen again unless the app is force closed and reopened.
Code is below, I have tried adding static content to the top of the list, that doesn’t work. It happens on both production and dev builds. Ionic is all up to date, but it has happened throughout version during development.
If you look at the inspector, the margin-top should be 76px, not 56px. When I switch tabs, it changes to 76px
Does anyone know how to fix this problem? Any thoughts on what I could try would be great!
Ionic:
ionic (Ionic CLI) : 4.5.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic 4.2.0, cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 2.2.3, (and 9 other plugins)
System:
Android SDK Tools : 26.1.1 (/Users/chrisdelambert/Library/Android/sdk)
ios-deploy : 2.0.0
ios-sim : 6.0.0
NodeJS : v8.9.1 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS High Sierra
Xcode : Xcode 10.1 Build version 10B61
The page has this code:
<ion-header>
<ion-navbar [ngClass]="getNavbarColor()">
<ion-title>{{ data.title }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content #content>
<ng-container [ngSwitch]="data.title">
<ion-list no-lines *ngSwitchCase="'Select a language'">
<button class="select-language-button" ion-item *ngFor="let item of data.items" (click)="languageSelected(item)" [ngClass]="rcp.language === item.title ? 'selected' : ''">
<span class="flag" [ngStyle]="{ 'background-image': 'url(./assets/imgs/flags/' + item.flag + ')' }"></span>
<span class="title">{{ item.title }}</span>
<span class="label">{{ item.language }}</span>
<i class="fa fa-check"></i>
</button>
</ion-list>
<ion-list no-lines *ngSwitchCase="'Select a reason'">
<button class="select-reason-button" ion-item *ngFor="let item of data.items" (click)="reasonSelected(item)" [ngClass]="rcp.reason === item.title ? 'selected' : ''">
<span class="title">{{ item.title }}</span>
<i class="fa fa-check"></i>
</button>
</ion-list>
<ion-list no-lines *ngSwitchCase="'Select your location'">
<button class="select-reason-button" ion-item *ngFor="let item of data.items" (click)="locationSelected(item)" [ngClass]="main.location === getConvertedLocation(item.title) ? 'selected' : ''">
<span class="title">{{ item.title }}</span>
<i class="fa fa-check"></i>
</button>
</ion-list>
<ion-list no-lines *ngSwitchCase="'Settings and Information'">
<button class="with-icon" ion-item *ngFor="let item of data.items" (click)="itemSelected(item)">
<i class="settings-icon {{item.icon}}"></i>
<span class="title">{{ item.title }}</span>
<span class="subtitle" *ngIf="item.label">{{getSettingsLabelContent(item.label)}}</span>
</button>
</ion-list>
<ion-list no-lines *ngSwitchDefault>
<button ion-item *ngFor="let item of data.items" (click)="itemSelected(item)" > {{ item.title }} </button>
</ion-list>
</ng-container>
</ion-content>