离子预览＆amp; iOS预览问题

Question

我在这里与0clue有一个问题。我目前正在使用离子角度开发应用程序。 Web版本上的预览完全很好，看起来不错参考图像。

但是，当我将其部署到iOS中时，按钮形状已关闭，并且有一个白色结构阻塞了标题参考图像。

我是该应用程序发展世界的新手，请对此感到愚蠢。

有人可以指导我朝正确的方向引导吗？

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>