Tap delay after navigation on IOS

Ionic Framework ionic-v3
1

Hi,

after page transitions tap or click events are not firing for a short duration (1 - 1.5 seconds) on IOS.

For example the following button’s are not working for the mentioned duration:

<ion-list> 
<button ion-item (tap)="editGroup(group)" *ngFor="let group of groups"> <h2>{{group.name}}</h2> </button>
</ion-list>

The same issue exists on buttons in the navbar:

<ion-buttons right> <button ion-button clear large (tap)="cancel()"> Cancel </button> </ion-buttons>

The issue still exists in the latest ionic version 3.3.0 and in the conference app.

Also this bug was reported over a year ago in https://github.com/ionic-team/ionic/issues/5838.

The suggested workaround was to use the material design navigation:

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

While i can confirm that this solution works and the tap delay disappears this workaround is
really not ideal for IOS users. But because of the workaround it seems that the issue
is related to the IOS view transition/animation.

For fast navigation between master and details views the tap delay is really annoying
and the app feels far away from being native.

Im wondering that this major bug is not resolved after one year and the issue is closed on github.

So maybe i’m missing something?

2

Hi @SwenVogel,

i’m experiencing the same issues in iOS when running on device, did you find any other solution apart from changing the transition to md (which is like you said really annoying for ios users) ?

3

Hi @mthomka,

no I’m sorry, no other solution at the moment. I’m wondering why no other people
have or see this issue - in my opinion it is really a show stopper.

Or I’m missing something?

4

@SwenVogel - i resolved this by using (click) in combination with tappable directive on non-button elements , the delay is now gone on ios.

Buttons i just use plain (click) and it seems to work fine in my app.

Hope that helps

5

Hi @SwenVogel, @mthomka and others
I also had the enoying problem with the delay after transitions on ios and solved it by setting the animation values directly. Please see the explanation of the solution at

Short answer is to use:

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