Using angular version 9, ionic version 5. Below is the code for tabs page. Somehow the bottom bar is cutoff in some mobiles and it is not displaying only in some mobiles.
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button (click)="tabClicked(1, 'jobs')">
<ion-icon [style]="selectedTabId == 1 ? 'color: #33c7ff' : ''" name="calendar-outline"></ion-icon>
</ion-tab-button>
<ion-tab-button (click)="tabClicked(2, 'payments')">
<ion-icon [style]="selectedTabId == 2 ? 'color: #33c7ff' : ''" src="assets/icon/payments.svg"></ion-icon>
</ion-tab-button>
<ion-tab-button (click)="tabClicked(3, 'onewash')">
<ion-icon [style]="selectedTabId == 3 ? 'color: #33c7ff' : ''" src="assets/icon/mop.svg"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="logout" (click)="logout()">
<ion-icon name="log-out-outline"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>