300ms delay beta2

Ionic Framework ionic-v3
1

I am testing the latest conference app with Ionic beta2 and there is most definitely a delay when tapping list item (schedule item). The list item bg instantly turns from white to gray but there is a delay before the page begins to slide in.

I’ve seen another post claiming that the 300ms delay has be removed from Ionic2, but coming apps side-by-side clearly shows a delay.

Was this fixed on an earlier build and worked it’s way back in?

Thanks to the team for all your hard work!

Jeff

1 Like
2

Personally, I don’t see the delay on Chrome, but only on my phone. I read that the 300msec is removed for the and only.

3

You will need to add click handlers on either <a> or <button> to not experience a delay. So in the case of an ion-item you can instead use this:

<button ion-item (click)="myFunc()">

</button>
1 Like
4

@joshmorony, the convention-app uses a (click) handler on the <button>.

<button ion-item (click)="goToSessionDetail(session)">

And there is nothing in the handler causing a delay:

goToSessionDetail(sessionData) {
    this.nav.push(SessionDetailPage, sessionData);
  }

BTW I’m seeing the delay on the iPhone and desktop Chrome, Safari browsers. It appears the delay in Chrome is due to the wait for the ink animation. Is it possible the same wait is applied in Safari and iOS?

5

I might be misunderstanding what you’re saying, but that’s exactly what I’m suggesting you do to avoid the delay.

Do this:

<button ion-item (click)="function()">

not this:

<ion-item (click)="function()">
1 Like
6

How do you remove the delay on custom divs and spans?

For example on click of an ion-card i want to navigate to another page.

<ion-card (click)="navigate()">
</ion-card>

Currently this is not usable.

Even after putting the tappable directive on the element it still feels sluggish. Sometimes the user has to tap twice to register the click event.

<ion-card tappable (click)="navigate()">
</ion-card>
2 Likes
7

You can also use <a> tags to avoid the tap delay, I haven’t actually tried it with an <ion-card> but I suppose you could just wrap the card in an anchor tag and add the click event to that.

1 Like
8

When applying the <button ion-item (click)="doSomething()"> instead of <ion-item ...> the funny thing is, that the delay is only removed when clicking the arrow icon in the button, not the button by itself. When tapping the icon, it behaves like it’s supposed to, but other than that is has a delay or need te be clicked twice, especially when coming back from another page…

1 Like
9

You just add tappable attribute to your element, if it is not a button or a:

<ion-item (click)="goToSessionDetail(session)" tappable>...</ion-item>

And that will remove the delay. It is not documented yet, but I found [this ticket on GitHub] (https://github.com/driftyco/ionic/issues/6113) about it.

4 Likes
10

Actually it is documented in the FAQ :wink: http://ionicframework.com/docs/v2/faq/#click-delays

5 Likes
11

Hello, any solution for this on iOS? I’m using a card and there is a delay for 2 seconds for click event to fire.

<ion-card (click)="pushData()">
    <h2>Click Me</h2>
</ion-card>
12

After upgrading to Ionic 3 I am seeing that some events are lost after navigating back. Adding tappable did not help:

<img ion-item tappable [src]="tile.img" (click)="showTile(tile)">
2 Likes
13

Then you should create a new topic instead of resurrecting this Ionic v2 beta2 from over a year ago :wink: