Flickering during the transition between views on iOS

@shepard_one wrote:

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.

Posts: 1

Participants: 1

Read full topic