Ion-img disappearing and reappearing during ion-tabs navigation (iOS)

@JamesSlater wrote:

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>

Posts: 1

Participants: 1

Read full topic