Ionic 5: ion-header turns black in iOS using ionic lab

@ebellempire wrote:

I’ve created a new app using ionic start appname blank --type=angular and made a few very small changes. For some reason, the header area appears to be in dark mode, but only in iOS, and only most of the time (if I make an edit to the HTML it will sometimes go back to normal).

Screen Shot 2020-03-25 at 12.01.33 PM1668×1488 136 KB

The only changes I’ve made to the blank template were to create a few pages using ionic g and create a split-pane menu. (See code below.)

discover.page.html

// discover.page.html (my default page)
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Discover</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Discover</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>
      Start with Ionic
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://ionicframework.com/docs/components"
        >UI Components</a
      >
    </p>
  </div>
</ion-content>

app.component.html

// app.component.html
<ion-app>
  <ion-split-pane contentId="main">
    <ion-menu contentId="main">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
    </ion-menu>

    <ion-router-outlet id="main"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

ionic info

Ionic:

   Ionic CLI                     : 6.2.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.5
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Capacitor:


   Capacitor CLI   : 1.5.1
   @capacitor/core : 1.5.1

Utility:

   cordova-res (update available: 0.11.0) : 0.8.1
   native-run                             : not installed

System:

   NodeJS : v13.2.0 (/usr/local/Cellar/node/13.2.0/bin/node)
   npm    : 6.13.6
   OS     : macOS Catalina

Any help or insights would be appreciated. Thanks! --E

Posts: 1

Participants: 1

Read full topic