javascript – 离子避免在Android上查看标题闪烁

我正在尝试使用离子模板示例建议的“标准”方式来制作标签页内容页面.

但是,我发现在Android中切换选项卡时,视图标题会闪烁.你不会在iOS或桌面浏览器上看到闪烁.但是,如果您将Chrome中的设备模式切换到Android设备,您将看到闪烁.

我怎么能克服它？

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>

解决方法:

感谢@AndresRehn分享链接(http://forum.ionicframework.com/t/ionic-view-transition-flickering/27441).通过在CSS中添加以下内容,可以轻松解决android上的标题闪烁问题.

/*
    CSS styles to eliminate the annoying flickering header when changing tabs in an Ionic app on Android:
    http://forum.ionicframework.com/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;
}