Button labels disappearing on iOS device

Ionic Framework
1

I have a weird issue which would appear to be a bug to me - anyone got any idea what might be happening? This is an Ionic 8.4.1 / Capacitor 6.0.0 / Angular 18.2 app. The issue only occurs on the device - it works fine in a web browser. I have a page with three toolbars at the top. The first two are always displayed. The third is only displayed when the user clicks the Edit button in my second toolbar. When this click occurs the third toolbar appears BUT (bizarrely) when this happens the two button labels on toolbar two disappear leaving just the button icons.

<ion-toolbar>
   Top Toolbar
</ion-toolbar>


<ion-toolbar color="light">
    <ion-buttons slot="start">
        <ion-button size = "small" (click)="filterButtonClicked($event)"><ion-icon slot="start" name="filter-outline"></ion-icon>Options</ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
        <ion-button size = "small"  (click)="editButtonClicked()">
            <ion-icon slot="start" [name]="editMode === true ? 'checkmark-done-outline' : 'create-outline'"></ion-icon>
            {{ editMode === true ? 'Done' : 'Edit' }} </ion-button>
    </ion-buttons>
</ion-toolbar>


<ion-toolbar *ngIf="editMode === true" color="light">
   Bottom Toolbar
</ion-toolbar>
1 Like
2

Same problem. Have you found a solution? It happens only on iOS
Angular 16.0.0, Ionic 7.0.0 Capacitor 5.0.6
A temporary solution is to replace ion-button with ion-chip