CODEWITHSUNDEEP
ioscssangularjscordovaionic-framework
Artyom Pranovich
Artyom Pranovich

Reputation: 6962

Flickering during the transition between views on iOS (ionic framework)

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. 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.

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:

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

Thanks in advance.

Upvotes: 0

Views: 3336

Answers (2)

Artyom Pranovich
Artyom Pranovich

Reputation: 6962

I didn't fix the cause of the problem, because I didn't figure out what was it.

But I used the following workaround to avoid/prevent it, which increased visible performance in terms of UX.

On the each tab I added the following code:

$scope.$on("$ionicView.enter", function () { 
  $scope.viewEntered = true; 
});
$scope.$on("$ionicView.beforeLeave", function () { 
  $scope.viewEntered = false; 
});

And on the each view I added into ionContent directive:

<ion-content ng-show="viewEntered">
   ....
</ion-content>

It fixed this issue.

The result you can see and compare with the previous video there: http://youtu.be/vDXvmZ6wqZE?hd=1

Hope it helps.

Upvotes: 2

Gr&#233;goire Motot
Gr&#233;goire Motot

Reputation: 937

<ion-view cache-view="false">

source : http://ionicframework.com/docs/api/directive/ionNavView/

Upvotes: -1

Related Questions