ionic-framework - イオンタブアイテムのスタイリング

Question

Ionic 4を使用しており、タブ レイアウトを使用しています。

次のようなタブ項目を設計する必要があります

この場合、tabs.page.html は次のようになります。

<ion-tabs>

    <ion-tab-bar slot="bottom" color="primary">
        ...

        <!-- center button with round border -->
        <ion-tab-button tab="ride" class="tab-btn-ride">
            <ion-icon name="bicycle"></ion-icon>
            <ion-label>Ride</ion-label>
        </ion-tab-button>

        ...

</ion-tabs>

ボタンを丸くするためのCSSは次のとおりです

.tab-btn-ride {
  width: 4rem !important;
  height: 5rem;
  border-radius: 50% 50%;
  box-shadow: 0 0 0 1.5pt #ff9823;
  margin-bottom: 2rem;
  max-width: 5rem;
  z-index: 10;
  border: 3px solid white;
}

これは、開発中にブラウザー (上の画像) で問題なく表示されます。しかし、apk を生成すると、Android デバイスでは下の画像のようになります。上部がページ ビューの下にクリップまたは非表示になっています。

z-index 値を増やしてみましたが、うまくいきませんでした。