Trouble hiding ion-nav-bar on iOS devices but not android

ionic-v1
1

Hi,

I have been learning and using ionic for a while but this is my first post, so hello to everyone.

What I am trying to do is, hide ion-nav-bar when user put device into landscape, with css, this works perfectly fine on android phones, but so far I don’t have any luck with iOS(iPhone 5s, iOS8.4.1). The following the code in html view:

    <ion-nav-bar align-title="center" class="bar-assertive bar-land">
	<ion-nav-buttons side="left">
		<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
	</ion-nav-buttons> 
	<ion-nav-buttons side="right">
		<button class="button button-icon button-clear ion-android-sync" ng-click="RefreshApi()"></button>
	</ion-nav-buttons>
</ion-nav-bar>

in css:

@media screen and (orientation:landscape) {

    .bar-assertive.bar-land {
        display: none;
    }

}

on iOS devices, I get the following when device is in landscape:

This area in read rectangle doesn’t show on android devices.

What am I missing here?

Please advise,
Thanks.

2

a quick update:

This seems to be a feature/bug of ionic.

When I set stylle=“display:none;” to ion-nav-bar in the starter project, I get the same results. When the starter app runs on iPhone, there is a blank area at the location of nav-bar.

So as for now, the only way to hide ion-nav-var on iOS seems to be use hide-nav-bar=‘true’.

Please correct me if I am wrong. Thanks.