I am trying to do tab content page with the "standard" way as suggested by the ionic template example.

However, I found that when switching between tabs in Android, the view-title will flickering. You will not see the flickering on iOS or desktop browser. However, if you toggle device mode in Chrome to android devices, you will see the flickering.

How can I overe it?

menu.html

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-positive">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/tab/content1">
          Tab 1 Content 1
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Tab.html

<ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light">

  <ion-tab title="Content1" href="#/app/tab/content1">
    <ion-nav-view name="tab-Content"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Content2" href="#/app/tab/content2">
    <ion-nav-view name="tab-Content2"></ion-nav-view>
  </ion-tab>

</ion-tabs>

content1.html

<ion-view view-title="Bookmarks">
  <ion-content>
    <h1>Content 1</h1>
  </ion-content>
</ion-view>

content2.html

<ion-view view-title="Bookmarks">
  <ion-content>
    <h1>Content 2</h1>
  </ion-content>
</ion-view>

I am trying to do tab content page with the "standard" way as suggested by the ionic template example.

However, I found that when switching between tabs in Android, the view-title will flickering. You will not see the flickering on iOS or desktop browser. However, if you toggle device mode in Chrome to android devices, you will see the flickering.

How can I overe it?

menu.html

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-positive">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/tab/content1">
          Tab 1 Content 1
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Tab.html

<ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light">

  <ion-tab title="Content1" href="#/app/tab/content1">
    <ion-nav-view name="tab-Content"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Content2" href="#/app/tab/content2">
    <ion-nav-view name="tab-Content2"></ion-nav-view>
  </ion-tab>

</ion-tabs>

content1.html

<ion-view view-title="Bookmarks">
  <ion-content>
    <h1>Content 1</h1>
  </ion-content>
</ion-view>

content2.html

<ion-view view-title="Bookmarks">
  <ion-content>
    <h1>Content 2</h1>
  </ion-content>
</ion-view>

• javascript
• angularjs
• cordova
• ionic-framework

Share Follow edited Sep 10, 2015 at 14:27 user1995781 asked Sep 10, 2015 at 8:05 user1995781user1995781 19.5k4545 gold badges139139 silver badges241241 bronze badges 3

• May or may not be related to the flickering, however while working with similar solutions for Androids I've found that installing the Android Crosswalk project does help you with performance and consistency issues across all Android devices. crosswalk homepage and how to install. The only downside is that your android .apk will increase by an approximate of 25mb – AndersRehn Commented Sep 10, 2015 at 8:13
• @AndersRehn Thanks for your ment. I don't think crosswalk will help much as I am seeing the flickering on chrome browser both on android and desktop (android device mode). – user1995781 Commented Sep 10, 2015 at 8:28
• 2 Might be a long shot but I found this thread, perhaps the suggestions there might help, unless you have already tried this? – AndersRehn Commented Sep 10, 2015 at 9:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Thanks you to @AndresRehn for sharing the link (http://forum.ionicframework./t/ionic-view-transition-flickering/27441). The title flickering issue on android can be easily solved via adding the following into your CSS.

/*
    CSS styles to eliminate the annoying flickering header when changing tabs in an Ionic app on Android:
    http://forum.ionicframework./t/flickering-when-navigating-via-tabs-on-android/27281/2
*/
.platform-android .header-item.title {
    transition-duration: 0ms;
}
.platform-android .header-item.buttons {
    transition-duration: 0ms;
}