Элементы Ioni c обрезаются при прокрутке в мобильном приложении - PullRequest
Новая
       51

Элементы Ioni c обрезаются при прокрутке в мобильном приложении

0 голосов
/ 20 марта 2020

У меня есть три кнопки внутри элементов ion-fab, которые отключаются на разных уровнях после прокрутки приложения.

Вот пример HTML одного из ion-fab button: 

<ion-grid *ngIf="parkDetails">
 <ion-row class="button-row">
   <ion-fab>
     <button ion-fab color="primary" (click)="showAlerts()" >
         <ion-icon class="warning" name="warning"></ion-icon>
     </button>
     <ion-badge class="alert-count alert-color" color="danger" *ngIf="parkDetails.park_alerts.length > 0">{{parkDetails.park_alerts.length}}</ion-badge>
   </ion-fab>
 </ion-row>
</ion-grid>

Родительским элементом этого тега является ion-content. А вот любой CSS, связанный с этими кнопками: 

.button-row {
        height: auto;
        justify-content: space-evenly;
        overflow: visible;
        ion-icon {
            font-size: 2em;
            &[class*="custom-heart"] {
                mask-image: url('an svg file');
            }
        }
        ion-fab {
            position: relative;
            margin: 0.5rem;
            overflow: visible;
        }
        .alert-count {
            top: 0;
            right: -5px;
            position: absolute;
            z-index: 999;
        }
    }

Только после того, как я щелкну где-нибудь в приложении, он go вернется в нормальное состояние. Я приложил изображение, чтобы показать, что кнопки обрезаются на разных уровнях, и не имеет значения, где я прокручиваю приложение (оно не глубокое). Верхняя часть - это, конечно, то, как они должны выглядеть, нижняя - насколько они могут быть отрезаны. У кого-нибудь есть идеи, почему это происходит?

...