White line above header


I am having a problem with a white line above header running on my Android 4.0.3! This is not a Cordova issue because I am also creating a app using cordova, jquery-mobile and everything is fine so this issue is with ionic and needs to be fixed.
Could anybody help me?


Hmm, I’ve seen this before but it’s always been an issue with cordova. Any chance you get a screen capture or something?


Hello! Anybody know how to fix this problem?


i do not have this issue in my ionic apps, so it would be really helpful if you may post a screenshot or a little codepen of your appstructure.

Geets, bengtler


I have the same issue.

follow the screenshot!


You can overwrite it in your sass or css file.

It is the iOS7 statusbar bug.
Solution set fixed height for the headerbar if it is a iOS7 device.

The css-class for the selektor can be found at the ion-content. (should be something like platform-ios7)



I found a solution.

Override the background image of bar, like this:

.bar {
border: none;
background-image: none !important;


Ah okay now i’ve got it^^.

I thought the red area is too high.
Yep the little white line is the border of the headerbar/ ionic panes.

Sorry for missunderstanding.
But over the platform class you could implement an ios7 fix for the headerbar height.

Greetz, bengtler