Ion-nav-bar flicker


#1

every second time I switch a view, my nav bar flickers it seems that the cached and the active nav bar alternate
I use tabs but I don’t think that matters

this is in my index.html

<ion-nav-bar align-title="middle" class="bar-positive">
    <ion-nav-title>
        <img src="img/logo_large.png"/>
    </ion-nav-title>

    <ion-nav-buttons side="right">
        <button class="button button-clear icon ion-gear-a padding-right"
                ui-sref="settings">
        </button>
    </ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>

tabs.html

<ion-tabs class="tabs-positive tabs-icon-top">

    <ion-tab title="one" icon-on="ion-ios-pie" icon-off="ion-ios-pie-outline" ui-sref="^.one">
        <ion-nav-view name="one"></ion-nav-view>
    </ion-tab>

    <ion-tab title="two" icon-on="ion-ios-albums" icon-off="ion-ios-albums-outline" ui-sref="^.two">
        <ion-nav-view name="two"></ion-nav-view>
    </ion-tab>

    <ion-tab title="three" icon-on="ion-ios-list" icon-off="ion-ios-list-outline" ui-sref="^.three">
        <ion-nav-view name="three"></ion-nav-view>
    </ion-tab>

</ion-tabs>

for example my dashboard

<ion-view>

    <ion-nav-buttons side="left">
        <button class="button button-clear icon ion-funnel"
                ng-click="doSomething()">
        </button>
    </ion-nav-buttons>

    <ion-content padding="true" class="dashboard">
       ...

and todo

<ion-view>

    <ion-nav-buttons side="left">
        <button class="button button-clear"
                ng-click="doSomething()">
            Go
        </button>
    </ion-nav-buttons>

do I miss something?


#2
$ionicConfigProvider.views.transition('none');

just deleted this line, everything works fine :sweat_smile:
was my fault!


#3

That’s exactly the problem I had: when setting $ionicConfigProvider.views.transition('none'); views Titles blink once during view entering.

I’ve tryied setting this:

.platform-android .header-item.title {
    transition-duration: 0ms;
}
.platform-android .header-item.buttons {
    transition-duration: 0ms;
}

But it doesn’t work without transitions enabled.

Enabling transitions again and problem was attenuated (because ionic fades out and in the new view title).

I don’t think it was your fault at all.


#4

where i can find/do this?


#5

I know the post is old, but the solution may help other developers. It seems to be a problem that only appears on android devices. Add this to your app:

var app = angular.module('myApp', ['ionic']);

app.config(function($ionicConfigProvider) {
  
  $ionicConfigProvider.views.transition('ios');
  $ionicConfigProvider.tabs.position('top');
  //$ionicConfigProvider.navBar.alignTitle('center').positionPrimaryButtons('left');

});

#6

I found using any of these solutions in v1.3.1 still results in either a flicker, or just another flavour of the issue when compared to views that do not include the ion-nav-bar. In ios you can see the bar greyed out as it transitions so it isn’t just related to android.

I posted a Github issue https://github.com/driftyco/ionic/issues/8581 so anyone that wants to subscribe (bottom right). No need to add a +1 message to subscribe just a reminder since this is a really annoying practice that tends to pollute any conversation to solve issues.