I have made an Ionic 4 app that uses both tabs and sidemenu navigation. Everything works perfectly when testing on my Android phone, however when I have started to test on iOS some issues have been highlighted.
This issue is where the logo (ion-img) that appears on each page disappears and is replaced by a clear box with white borders for a brief second, and then the ion-img appears again (when navigating using the tabs).
Does anyone know what would cause this, and how I would go about fixing it?
Here is a link to a video of the issue for more detail.
Here is the code for my dashboard page which includes the logo:
<div class="nav-wrapper" style="background: white;">
<ion-header class="navbar">
<div class="icons">
<ion-buttons slot="start">
<ion-menu-button color="tertiary"></ion-menu-button>
</ion-buttons>
<ion-icon (click)="settings()" class="settings" color="tertiary" name="settings"></ion-icon>
<ion-img src="assets/logo.png"></ion-img>
</div>
</ion-header>
</div>
this is the code for the tabs, present in the on the dashboard page and the other 2 pages - just differs slightly with routing, active-item etc.
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button routerDirection="forward" (click)="about()">
<ion-icon name="information-circle-outline"></ion-icon>
<ion-label>About Us</ion-label>
</ion-tab-button>
<ion-tab-button class="activeTab" tab="dashboard">
<ion-icon color="blue" name="home"></ion-icon>
<ion-label>Dashboard</ion-label>
</ion-tab-button>
<ion-tab-button (click)="contact()">
<ion-icon name="contacts"></ion-icon>
<ion-label>Contact Us</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>