Ionic2 iOS transitions blocking tap or click for a second

Question

I have an issue with Ionic2 Final tapping behaviour on iOS.

After a page transition, a tap or click on a card doesn't work for 1-2 seconds, so the user has to tap or click twice (or wait a moment before clicking). I already tried to use <a> inside the card instead of attaching the click to the card directly. I also tried (click), (tap), [navpush] and I have tried adding tappable to the card.

<ion-content padding class="modules card-background-page">
  <ion-card  class="module-card" *ngFor="let module of modules">
  <a (tap)="tapEvent($event)" (click)="clickEvent($event)" [navPush]="modulePage" [navParams]="{id: module.id}" >
    <img src="{{module.thumbnail}}"/>
    <div class="card-content">
      <div class="card-title">
          <strong>Module {{module.number}}</strong>
      </div>
      <div class="card-subtitle">
          <strong *ngIf="translate.currentLang!='fr'">{{module.subtitle_en}}</strong>
          <strong *ngIf="translate.currentLang=='fr'">{{module.subtitle_fr}}</strong>
      </div>
    </div>
  </a>
  </ion-card>
</ion-content>

On Android it works fine.

After a lot of trial and error I "fixed" this issue by using android transitions:

    IonicModule.forRoot(MyApp, {
      pageTransition: 'md-transition'
    }),

So the problem seems to be the iOS transition. Any idea how to really fix this? Anybody having the same problem? I also have problems with tipping on Back very short after the transition or with closing a side menu. These are not so easily replicable though.

iOS 10.1.1 on iPhone 6S

Answer 1

The problem seems to be the actual animation used for the transition. You can solve this by adjusting the timing (and easing) for the animation when doing a push to the navCtrl. You do this by providing an optional option object as the last parameter.

this.navCtrl.push('MyPage', null, {
  duration: 200,
  easing: 'cubic-bezier(0.36,0.66,0.9,1)'
});

Explanation follows...

The original animation setting is 500 ms which is too long. However the actual visual animation does not actually appear to take that long since the cubic-bezier curve of the original animation is very flat at the last 200-300ms (which can be seen in the picture below).

That is why the easing has to be changed as well.

Original: cubic-bezier(0.36,0.66,0.04,1) Changed to: cubic-bezier(0.36,0.66,0.9,1)

To make the app be fast when navigating back as well the same animation has to be added when the back button is pressed in the view. This can be done by overriding the back button behaviour of the NavBar.

So add this to your page component

@ViewChild(Navbar) navBar: Navbar;

ionViewDidLoad() {
  this.setBackButtonAction()
}

//Method that overrides the default back button action
setBackButtonAction() {
  this.navBar.backButtonClick = () => {
    this.navCtrl.pop({
      duration: 200,
      easing: 'cubic-bezier(0.36,0.66,0.9,1)'
    });
  }
}

For anyone building the source (or wanting to provide a pull request to the Ionic team). The original values are set in ios-transition.ts and should be changed there

const DURATION = 500;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';

EDIT: I have submitted a pull request to the Ionic team https://github.com/ionic-team/ionic/pull/13029