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


#1

Hello all,

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

Explenation:
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>
</ion-tab>

States

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

Index.html nav-bar

<ion-nav-bar class="bar-light">
		<ion-nav-back-button>
		</ion-nav-back-button>
	</ion-nav-bar>

#2

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-view>
  <ion-nav-bar> </ion-nav-bar>
  <ion-content> </ion-content>
</ion-view>

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


#3

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.


#4

Anybody here who solved this Problem?

EDIT
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?


#5

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

template.html:

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