Tab Bar Bug on iPhone 13

Ionic Framework Ionic Angular
1

For some reason, me my ion-tab-bar is not working in iPhone 11 or above…

Here’s some pics:
iPhone 8:
image

iPhone 13:
image

My ion-tabs code:

<ion-tabs >
  <ion-tab-bar slot="bottom" class="footer" >

    <ion-tab-button class="item-menu-footer" (click)="navigateRootTo('/news')" [ngClass]="{'bg-white': active === 'news'}" tab="news">
      <img  *ngIf="active === 'news'" src="assets/imgs/noticias-footer.png" alt="">
      <img  *ngIf="active !== 'news'" src="assets/imgs/noticias-branco.svg" alt="">
      <!-- <ion-badge>2</ion-badge> -->
      </ion-tab-button>

    <ion-tab-button class="item-menu-footer"  (click)="navigateRootTo('/boats')" [ngClass]="{'bg-white': active === 'boats'}" [disabled]="!sailorIsActive" tab="boats">
      <img *ngIf="active !== 'boats'" src="assets/imgs/embarcacoes.svg" alt="">
      <img *ngIf="active === 'boats'" src="assets/imgs/embarcacoes-footer.png" alt="">
    </ion-tab-button>

    <ion-tab-button class="item-menu-footer" (click)="navigateRootTo('/dashboard')" [ngClass]="{'bg-white': active === 'dashboard'}" tab="dashboard">
      <img *ngIf="active === 'dashboard'" src="assets/imgs/dashboard.png" alt="" >
      <img *ngIf="active !== 'dashboard'" src="assets/imgs/dashboard-branco.svg" alt="" >
    </ion-tab-button>

    <ion-tab-button class="item-menu-footer" (click)="navigateRootTo('/navigation')" [disabled]="!sailorIsActive" [ngClass]="{'bg-white': active === 'navigation'}" tab="navigation">
      <img *ngIf="active !== 'navigation'" src="assets/imgs/embarcacao-branco.svg" alt="" >
      <img *ngIf="active === 'navigation'" src="assets/imgs/navegacao-footer.png" alt="" >
    </ion-tab-button>

    <ion-tab-button class="item-menu-footer"  (click)="navigateRootTo('/washing-turning')" [disabled]="!sailorIsActive" [ngClass]="{'bg-white': active === 'washing-turning'}" tab="washing-turning">
      <img *ngIf="active !== 'washing-turning'" src="assets/imgs/lavacao-e-giro-branco.png" alt="">
      <img *ngIf="active === 'washing-turning'" src="assets/imgs/lavacao-e-giro-footer.png" alt="">
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>

The only change related to tab-bar inside my globals.scss:

.ios ion-tab-bar {
  width: 100%;
  top: 56px;
}

.md ion-tab-bar {
  width: 100%;
  top: 56px;
}