Navbar extra space on top in iOS

Ionic Framework ionic-v3
1

Hi All,

I’m trying the following nav-bar in ionic2 and getting some extra spaces on top of the nav-bar in iOS.

	<ion-header>
	  <ion-navbar color="QCTSuppliers">
	    <ion-title>Favorites</ion-title>
	    <ion-buttons end>
	      <button ion-button icon-only class="option option-logout" (click)="logout()"><ion-icon name="log-out"></ion-icon></button>
	    </ion-buttons> 
	  </ion-navbar>
	</ion-header>
	 
	<ion-content class="contacts-page-content">
	</ion-content>

In the following screenshot we can see the extra space on top of Favorites header:

image
IMG_5603.PNG1242×2208 57.2 KB

I tried overridding the SAAS variables $navbar-ios-height: 35px; and
$toolbar-ios-height: 35px;. But it is not reducing the top space. I’ve searched in this blog as well as on google. Couldn’t find a solution/workaround for this issue.

Any help is greatly appreciated.

Thanks,
Annadurai.

2

This issue is still not resolved. Please help if possible.

Thanks.

3

I’m having the same. Any solution to this?