Ionic Fab button position

Question

using ionic 7.1.1

When i add a fab button in ionic i have it at the bottom of the screen and i want it floating just over the tabs at the bottom of the page. when i run it in the browser its exactly where i want it. but when i deploy to iphone it is not in the correct position it is anchored to the bottom of the screen. my code is

<ion-tabs> 
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="lineup">
      <ion-icon aria-hidden="true" src="assets/icon/document-add.svg"></ion-icon>
      <ion-label>Lineup</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="standings" class="xs">
      <ion-icon size="large" src="assets/icon/list.svg"></ion-icon>
      <ion-label>Standings</ion-label>
    </ion-tab-button>

    <ion-tab-button> </ion-tab-button>
    
  
    <ion-tab-button tab="playercontracts" >
      <ion-icon src="assets/icon/contract-with-pen.svg"></ion-icon> 
      <ion-label>Contracts</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tradeoffers"  class="xs">
      <ion-icon src="assets/icon/person-swap.svg"></ion-icon> 
      <ion-label >Trades</ion-label>
    </ion-tab-button>
 
  </ion-tab-bar> 
</ion-tabs>

<ion-fab vertical="bottom" horizontal="center" slot="fixed">
  <ion-fab-button  color="secondary" (click)="presentActionSheet()">
      <ion-icon src="assets/icon/football.svg" ></ion-icon>
  </ion-fab-button>
</ion-fab>

i have tried putting the fab inside the tabs but that didnt work. nothing i try seems to work. is there a way to get this button positioned correctly when deployed ?

In browser

in phone

thank you in advance