Blank nav-bar / header on Swipe Back (Tabs Layout)

Hello all,

I have a Problem with ion-nav-bar and the Swipe Back feature.

I’ve setup a Project with the Tabs Layout and recognized that, when I swipe back from the chats-detail View, the nav-bar will get blank as long as I touch the Screen.

There is only the content of the previous Header / nav-bar viewable (behind the chats-detail view)

Can anyone help me to solve this problem?

Tab Creation

<ion-tab title="Second" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/tab/chats">
	<ion-nav-view name="tab-chats"></ion-nav-view>


state('tab.chats', {
		url: '/chats',
		views: {
			'tab-chats': {
				templateUrl: 'templates/tab-chats.html',
				controller: 'ChatsCtrl'
	.state('', {
		url: '/chats/:chatId',
		views: {
			'tab-chats': {
				templateUrl: 'templates/chat-detail.html',
				controller: 'ChatDetailCtrl'

Index.html nav-bar

<ion-nav-bar class="bar-light">

I have the same issue in my project. My main view is a Menu layout with a list under one of the options. A detail view comes up when you click on the list item. Fine so far, but when I swipe back (iOS style) to the main view and stop the swipe half way, the tab bar in the detail view disappears.

My detail view is set up like this:

  <ion-nav-bar> </ion-nav-bar>
  <ion-content> </ion-content>

Does something happen to the ion-nav-bar when swiping back?

I don’t know why but the official tab template (ionic start appName tabs) doesn’t have this issue.
If I visit a Sub-View and swipe back then the Nav-Bar behaves normally.

Anybody here who solved this Problem?

Found the Problem.
This only occurs, when we change the CSS of Nav-Bar.

If I use this CSS Code then the nav-bar gets blank if I try to swipe.

.platform-ios .bar {
background-color: #FF7F66 !important;


Has someone an Idea?

Changing the ion-nav-bar directive to ion-header-bar fixed the issue for me!


<ion-view view-title="Example" >
    <ion-header-bar class="custom-class">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon-round" menu-toggle="left"></button>