Ion-header partially visible on Android

Hi,

recently, we’ve been running into an issue where the ion-header is not rendering correctly on Android anymore (any Android device).

The header displays as partially visible:

It displays fine on iOS devices though. Actually, it displays correctly on Android devices as well but only occasionally, maybe one run out of ten. It also display correctly on the web, it’s just the Android devices that cause issues. I checked (inspected all margins and they all seem to be top:0, etc. app.scss is empty so no overrides. Tried the following but not difference:

ion-content { // resolves partially hidden top bar FABs (ion-fab) with attributes top edge appear under ion-header with devices using Chrome version 71 · Issue #919 · ionic-team/ionic-v3 · GitHub
contain: size style !important;
}

Here is the environment info:

Ionic:

  • ionic (Ionic CLI) : 4.12.0*
  • Ionic Framework : ionic-angular 3.9.4*
  • @ionic/app-scripts : 3.2.3*

Cordova:

  • cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)*
  • Cordova Platforms : android 7.1.4*
  • Cordova Plugins : cordova-plugin-ionic-keyboard 2.0.5, (and 9 other plugins)*

System:

  • Android SDK Tools : 26.1.1 (C:\apps\Android\Sdk)*
  • NodeJS : v9.11.1 (C:\Program Files\nodejs\node.exe)*
  • npm : 6.4.1*
  • OS : Windows 10*

Thank you

We would need to the template code and any modifying CSS that you are applying to help.

Hi Chris,
here is the template:

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Dashboard</ion-title>
  </ion-navbar>
</ion-header>


<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <h3 [hidden]="displayDataAvailable" padding-left padding-right text-center>Nothing to display (No permission)</h3>
  <div [hidden]="!displayDataAvailable">
    <ion-row padding-left>
      <ion-col>
        <h3>Incidents</h3>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col width-33>
        <ion-card class="topPriority card-dashboard" (click)="goToIncidents(2);">
          <ion-card-content>
            <p text-center style="font-size:30px;">{{incidentStatistics.numberOfTopPriorityIncidents}}</p>
            <p text-center>Top</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col width-33>
        <ion-card class="highPriority card-dashboard" (click)="goToIncidents(1);">
          <ion-card-content>
            <p text-center style="font-size:30px;">{{incidentStatistics.numberOfHighPriorityIncidents}}</p>
            <p text-center>High</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col width-33>
        <ion-card class="lowPriority card-dashboard" (click)="goToIncidents(0);">
          <ion-card-content>
            <p text-center style="font-size:30px;">{{incidentStatistics.numberOfNormalPriorityIncidents}}</p>
            <p text-center>Normal</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row [hidden]="!openedAlarms" padding-left>
      <ion-col>
        <h3>Alarm stack</h3>
      </ion-col>
    </ion-row>
    <ion-list [hidden]="!openedAlarms">
      <ion-item-sliding #item *ngFor="let alarm of alarms" (ionDrag)="ondrag($event, item, alarm.id)">
        <ion-item (click)="goToAlarmStack()" >
          <h2>{{alarm.alarmName}}</h2>
          <p>{{alarm.raised}}</p>
        </ion-item>
        <ion-item-options side="right">
          <button ion-button text-right expandable (click)="showPrompt(alarm.id)">
              <ion-icon name="checkmark" role="img" style="font-size:24px;">
                </ion-icon>
                Close
          </button>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>
  </div>
</ion-content>

and the dashboard.scss

ion-card {
    min-height: 6.5em;
    margin:0;
    width: 100%;


    ion-card-content p {
        color:color($colors, white) !important;
    }
}

.card-dashboard{
    margin:0;
    width: 100%;
}

    .topPriority {
        background: color($colors, topPriority);
    }

    .highPriority {
        background: color($colors, highPriority);
    }

    .lowPriority {
        background: color($colors, lowPriority);
    }


    .closeButtonDashboard{
        width: 100% !important;
        background: rgba(0,166,91,1);
        background: -moz-linear-gradient(left, rgba(0,166,91,1) 0%, rgba(0,166,91,0.7) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,166,91,1)), color-stop(100%, rgba(0,166,91,0.7)));
        background: -webkit-linear-gradient(left, rgba(0,166,91,1) 0%, rgba(0,166,91,0.7) 100%);
        background: -o-linear-gradient(left, rgba(0,166,91,1) 0%, rgba(0,166,91,0.7) 100%);
        background: -ms-linear-gradient(left, rgba(0,166,91,1) 0%, rgba(0,166,91,0.7) 100%);
        background: linear-gradient(to right, rgba(0,166,91,1) 0%, rgba(0,166,91,0.7) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a65b', endColorstr='#00a65b', GradientType=1 );
    }

.testBlurBackground {
    filter: blur(3px);
    -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
}

Cheers

try below css

ion-title{
padding-top: 5% !important;
}

@zubinraja unfortunately still the same , top header is partially hidden behind the top bar of the Android OS.

can you inspect it in chrome and try giving margin or padding to ion-header
or simply create < ion-toolbar >& nbsp ;< /ion-toolbar > above ion-navbar

If I inspect it in Chrome dev tools the web actually looks fine. It’s only on android that it looks overlapped with the status bar. I can manually add padding-top:50px which pushes the whole thing down, but it would look weird then on ios as it would be pushed down:

Additonally, this situation happens 9 out of 10 cases, then once it’s fine, but I cannot figure out the pattern.

Thanks

What is interesting is if I manually set the margin-top: 20px to body:


then the android app looks ok:

so it seems as if the entire app canvas sticks too much to the top.

It turns out that the issue was the following statement in app:

this.statusBar.overlaysWebView(true);

By removing this and using only the following the issue is resolved.

this.statusBar.backgroundColorByHexString('#00A0E4');

You don’t need to set padding manually. Check my solution here