Flickering when navigating via tabs on Android?

Hi all,

I’m currently prototyping a tab-based application using Ionic, and I couldn’t help noticing a flickering in each tab’s ion-header-bar when navigating from one tab to the other. I’ve tried to use ng-cloak without success.

My code follows classical patterns (only more ion-nav-view in my main html, routing etc), rest more or less looks like this:


<ion-tabs class="tabs-royal tabs-icon-top">
    <ion-tab title="Events" icon-on="ion-ios-calendar" icon-off="ion-ios-calendar-outline" href="#/tab/events">
    <ion-nav-view name="events-tab"></ion-nav-view>

[… a few more tabs]


Each tab being defined in its own HTML file:

<ion-header-bar class="bar-royal">
    <h2 class="title">tab header</h2>
    <p>Tab data</p>

In each tab navigation, under Android, the ion-header-bar briefly flickers … what am i doing wrong ?

Thanks for your help

Overriding transition duration:
transition-duration: 0ms;

for header items like this for example:

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

works for me.


That’s it! pure genius, solved a problem that annoyed me for a long time …

can’t win this issue. still same issue