My app has been working fine on android and most iOS devices except for the iPhone X. When running on iPhone X the menu button is stuck on the upper left and cannot be clicked on. This is a strange bug that’s iPhone X exclusive and I’d like to figure out a fix for this soon so that we can ship for iPhone X compatibility.
Screenshot Below:
Menu Button Code:
<!-- App Header -->
<ion-header>
<ion-item>
<ion-menu-button color="secondary" style="align:left; font-size:20px;"><b><ion-icon class="menuButton animated rotateIn" name="menu"></ion-icon></b></ion-menu-button>
</ion-item>
<br>
<ion-toolbar>
<a [routerLink]="['/home']"><img class="centerbutton" width="250px" src="assets/images/tickchek-logo.png"/></a>
</ion-toolbar>
<ion-toolbar>
<strong><p text-center>Welcome to TickCheck</p></strong>
</ion-toolbar>
</ion-header>
<!-- App Header -->
Menu Button SCSS:
ion-menu-toggle{
margin-top: constant(safe-area-inset-top);
}
ion-menu-button{
margin-top: constant(safe-area-inset-top);
}
Thank you!