Long delay (2-3 seconds) till ion-card click-handler reacts to taps

[agrt56]

Short description of the problem:

After a page transition (using side menu or navigation) a clickable ion-card don't react to taps/clicks for 1-3 seconds in mobile Safari (iOS 9.x).

<ion-card class="entry" (click)="openEntry()">
</ion-card>

Other information:
This issue don't occur on other browsers. No javascript exceptions are thrown.

Which Ionic Version?
Ionic 2.0 beta 3

Run ionic info from terminal/cmd prompt:
Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS:
Node Version: v5.8.0

[agrt56]

Update: other elements like simple divs are affected too.

[denkomanceski]

I had the same problem, the 300ms delay is getting added only on buttons. So even if you make <ion-item> you need to do this to make it responsive <button ion-item></button>. If you want to make a div or another element responsive you need to add the attribute tappable

source: http://ionicframework.com/docs/v2/api/components/item/Item/
source2: #5616
p.s: On android everything worked fine without doing these changes, I had the problems on iOS only and this is the way I solved them.
p.s.s: It is very annoying I know :)

[agrt56]

Thanks for your response. I'll continue with your workaround for now.

But I'm still not sure if my issue is associated with the 300ms delay. As I mentioned, it only occurs shortly after any page transition. Seems like a bug... a iOS-only bug.

Update:
It's much, much better with tappable.

My suggestion for a future release: add tappable automatically if a (click) attribute is present. It's kinda confusing if only one platform is affected.

[apat183]

I can report this is also happening on iOS for me as well, not on android or web. Just some additional points that I'm noticing on my issue. I've noticed that the page i'm pushing into view, actually shows on the side of the view for a second and sits there for a second before transitioning into view. This is causing additional delay, it's only happening on iOS. It could be a transition issue as well.

Please see zoomed image below.
https://drive.google.com/open?id=0BzsOvFFIePyedk1BVmktc3NjU00
If you look at right edge, it's got the standard white boarder.

https://drive.google.com/open?id=0BzsOvFFIePyeSWxiZ2VtYWpCSmM
Then the second image is once I've clicked the card, the new page that will be transitioned in, slightly shows for a second, pauses and then slides into view. I've delayed any loading of data to the onPageDidEnter event so it shouldn't be anything to do with my data being loaded. Also the view slightly peaking in actually shows all the data loaded (images), so it is being loaded before the pause. I'm thinking it's something to do with the caching because it doesn't happen when I click on a card the first time, it's only when it click on it again to open the details.

Anyone know how I can stop the page from caching so I can test if that is the issue?

[jgw96]

@agrt56 would you mind posting what your meta name="viewport" tag looks like?

[agrt56]

@jgw96
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

[jaspersorrio]

Should also add this information to the docs.

I spent a few days looking for ways to get rid of the 300ms delay.

[adamdbradley]

Yes an element that is not clickable by default, such as ion-card or a div, needs to have the tappable attribute added. Buttons and links do not have this problem. This is also only a problem for iOS because Android automatically removes the 300ms delay. (Yes in iOS 9.3 it's removed too, but that's only in WKWebView and not UIWebView, which is what Cordova uses for the time being). We'll work to document this all better, thanks.

[chris08002]

I have the same issue with the Ionic2 Final. Not only on the side menu, but also on cards and the back button. Always after a screen transition taps / clicks are not recognised for a second or so. Has anybody found a solution? I have tried tappable and I tried tap and click (which both do not fire). On Android no problem, just iOS.

<ion-card tappable class="module-card" *ngFor="let module of modules"  [navPush]="modulePage" [navParams]="{id: module.id}" (tap)="tapEvent($event)" (click)="clickEvent($event)">
  <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>
</ion-card>

UPDATE:

I "fixed" this issue by using android transitions:

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

So the problem seems to be the iOS transition.

[chandanch]

Hello any update on this?

[chris08002]

No. For me the only "solution" is the combination of using "tappable" and MD transitions.

[trakhimenok]

@adamdbradley can you comment on @chris08002 statement that having tappable + MD transition fixes this? May it be an issue with iOS transition code?

[SwenVogel]

Hello, any progress on this issue? I can confirm that this issue also exists in the latest
ionic version 3.3.0. After page transition taps or click events are not fired for a short duration
(1 - 1.5 seconds).

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>

I can also confirm the the suggested workaround is working:

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

But for IOS user this solution is not ideal.

[enbake-dev]

This issue is still there and the above given workarounds does not work. Tested in latest ionic version for android.

[felschr]

I also have a delay on button clicks on older Android devices.
On my Pixel everything seems quite ok, though.

[RichardHoultz]

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 solution at
https://stackoverflow.com/questions/42343749/ionic2-ios-transitions-blocking-tap-or-click-for-a-second/46509791#46509791

That along with using 'tappable' (if it is not a button in which case the click delay is already handled by ionic) will make the app feel much better.

[Gamerakki]

hi,

i tried the page transaction solution but this doenst to work on ios os 9.3.5 can anyone help. the scroll is also getting delayed and scroll after 2-3 seconds :(

[Screeze]

I have come across the same issue. iOS taps would not be recognized 1-2 seconds after I switched to new page (somehow I do not see transitions on iOS at all?) The suggested solution
IonicModule.forRoot(MyApp, { pageTransition: 'md-transition' }),
solves it for me too!

[Cabinet20]

So can I add that if you add the "tappable" attribute to the card it works but with a div inside the card then although tapping on the card is quick, tapping on the div inside the card still creates the 2 second delay. Is there any way around this?

[oceankai]

push('page', parameter, {duration:0})

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.