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: [Screenshot_20190523-105548] It displays fine on iOS devices though. Actually, it displays correctly on Android devic…

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');

Ion-header partially visible on Android

Ionic Framework ionic-v3

twestrick January 27, 2025, 3:45pm 12

It is most likely related to Safe Area Padding.

If you are using Capacitor 7, see Capactor 7 on Android - Toolbar and Tab Bar - display issue

Topic		Replies	Views
Safe-area css ios issue Ionic Framework	8	15538	January 26, 2023
Default iPhone X+ header(time, battery...) shown above ion-header, how to work around this? Ionic Framework	8	2050	November 9, 2021
Ion-header in slide page produces empty gap on ios ok on android ionic-v3	3	1250	July 19, 2021
Ion-header inside ion-tab not working ionic-v1	3	1918	September 8, 2015
IOS statusbar overlays app ionic-v3	3	788	August 23, 2022

Ion-header partially visible on Android

Related topics