стилизация элементов ионных вкладок

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, но безуспешно.

Answer 1

Круглое изображение вырезано из-за высоты нижнего колонтитула. Так что решил эту проблему, как показано ниже

1. Увеличение высоты нижнего колонтитула
2. Уменьшенный размер круглого изображения.