Flickering when navigating via tabs on Android?

ionic-v1
1

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:

tabs.html

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

[… a few more tabs]

</ion-tabs>

Each tab being defined in its own HTML file:

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

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

Thanks for your help

2

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.

2 Likes
3

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

4

can’t win this issue. still same issue