Flickering during the transition between views on iOS

ionic-v1
1

This is the video of the issue: https://youtu.be/9m1MlaiuZB0

On the video you can see that during the transition between tabs there is a strange flickering/lack/delay in rendering. This issue occures only when the animation of the transition goes from right to left.

The tabs are custom and implemented as a button-bar in the subheader.

$scope.data.tabs = [
  {
     title: "Accepted",
     state: "events.accepted"
  },
  {
     title: "Pending",        
     state: "events.pending"
  },
  {
     title: "Declined",    
     state: "events.declined"
  }
];

<ion-view>   
  .....
  <ion-header-bar align-title="center" class="bar bar-subheader event-type-bar">
    <div class="button-bar">
      <a class="button button-light event-type-bar-button" ng-repeat="tab in data.tabs" tab-state ui-sref="{{tab.state}}">{{tab.title}}</a>
    </div>
  </ion-header-bar>

  <ion-nav-view name="events-view"></ion-nav-view>
  .....
</ion-view>

Click on the tab changes the state and loads the new view via nav-view.

This is my UI-router config for these tabs:

	  .state('events', {
	    url: '/events',
	    abstract: true,
	    templateUrl: 'views/events/events.html',
	    controller: 'EventsCtrl',
	  })
	  .state('events.accepted', {
	    url: '/accepted',
	    views:{
	    	'events-view':{
	  	   templateUrl: 'views/events/accepted.html',
	  	   controller: 'AcceptedEventsCtrl',
	    	}
	    }
	  })
	  .state('events.pending', {
	    url: '/pending',
	    views: {
	    	'events-view': {
	  	   templateUrl: 'views/events/pending.html',
	  	   controller: 'PendingEventsCtrl',
	  	  }
	    }
	  })
	  .state('events.declined', {
	    url: '/declined',
	    views: {
	    	'events-view': {
	  	   templateUrl: 'views/events/declined.html',
	  	   controller: 'DeclinedEventsCtrl',
	    	}
	    }
	  })

I tried to change the direction of the transition with nav-direction, but it doesn’t help.

As a workaround I disabled the animation during the transitions between nav-views (from there), but it’s not the way which I’m looking for.

My ionic configuration:

  • Cordova CLI: 5.3.3
  • Ionic Version: 1.1.0
  • Ionic CLI Version: 1.7.1

By the way, the issue reproduces on the iOS device (iPhone 6) and simulator both, and also in the Chrome Device mode too.

I asked this question on SO (there is a link), but it doesn’t help.

Thanks in advance.

2

Have you tried using Cordova Native Page Transitions plugin?

3

My first guess is, that you implemented ion-nav-view somewhere wrong, could you doublecheck if you used it correctly? (ion-view is the child of ion-nav-view etc).

My second guess is, that it is somehow related to ng-repeat. What happens when you switch ng-repeat with collection-repeat ?

4

My first guess is, that you implemented ion-nav-view somewhere wrong, could you doublecheck if you used it correctly? (ion-view is the child of ion-nav-view etc).

Yes, it works as it is necessary. Ion-view is the child of ion-nav-view.
The template for abstract state with ion-nav-view you can see in the question. Below I provide the child view of the ion-nav-view:

<ion-view hide-back-button="true">
  <ion-nav-title class="custom-title">Kickspot</ion-nav-title>
  <ion-nav-buttons side="primary">
    <button class="button button-icon icon ion-ios-gear white" ui-sref="menu"></button>
  </ion-nav-buttons>

  <ion-content ng-show="viewEntered">
    <ion-refresher pulling-text="Pull to refresh..." on-refresh="pullToRefresh()"></ion-refresher>

    <div ng-show="!acceptedEvents && !singleEvent" class="card">
      <div class="item item-text-wrap text-center">
        Create a new spot by clicking a button below!
      </div>
    </div>

    <events-list ng-if="acceptedEvents" events="acceptedEvents" view-event="viewEvent"></events-list>
    <single-event ng-if="singleEvent"></single-event>

    <ion-infinite-scroll immediate-check="false" on-infinite="getOldEvents()" ng-if="!dataIsOver" distance="1%"></ion-infinite-scroll>
  </ion-content>
</ion-view>

My second guess is, that it is somehow related to ng-repeat. What happens when you switch ng-repeat with collection-repeat ?

It doesn’t help. Even if I remove ng-repeat and leave just a static content, which doesn’t depend on server data - the issue reproduces again.
My thought is that it can be related to Ionic’s caching process, but how exactly - I don’t know.

5

My thought is that it can be related to Ionic’s caching process, but how exactly - I don’t know.

Hm… maybe. Try this:

Add cache: false
to your states.It should look like this:

  .state('events.accepted', {
    url: '/accepted',
    cache: false,
    views:{
    	'events-view':{
  	   templateUrl: 'views/events/accepted.html',
  	   controller: 'AcceptedEventsCtrl',
    	}
    }
  })
  .state('events.pending', {
    url: '/pending',
    cache: false,
    views: {
    	'events-view': {
  	   templateUrl: 'views/events/pending.html',
  	   controller: 'PendingEventsCtrl',
  	  }
    }
  })

Apparently your transitions work fine when going ‘forward’. Since by default your forward views are not cached, maybe we can fix this by not caching these views at all.

Hope it works :confused:

6

i need to cache views, but what you said did make sense. So there’s no way to make this work with cached views?