Ionic Preview & iOS preview issue

Question

I have an issue here with 0clue what is going on. I am currently developing an application using ionic angular. The preview on the web version is totally fine and looks good reference image.

But when I deploy it into iOS the button shape is off and there is a white structure blocking part of the header reference image.

I am new to the app developing world, please bear with my stupidity on this.

Can someone guide me in the right direction, please?

ion-toolbar {
    --background: #383E56;
    height: 102px;
}
  
ion-header ion-toolbar:last-of-type {
    display: flex;
    align-items: center;
    justify-content: center;
}

.searchbar {
    width: 352px;
    height: 42px;
    background: #C2C3C8;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.6);
    border-radius: 90px;
    -webkit-position: sticky;
    position: sticky;
    display: flex;
    justify-content: flex-end;
    padding: 3px 3px;
    margin: auto;
    margin-top: 35px;
}

.btn2{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-sizing: border-box;
    background: #F69E7B;
    box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 25%);
    //position
    position: absolute;
    top: 3px;
    left: 313px;
    //vector size & position 
    font-size: 27px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    justify-content: center;
}

<ion-header>
  <ion-toolbar>

    <div class="searchbar">
      
      <button class="btn2" (click)="toMorePage()">
        <ion-icon name="arrow-back-outline"></ion-icon>
      </button>
      
    </div>

  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>