Delay on iOS version when clicking on router-link or ion-button?

I’ve noticed that there is a delay when you click on stuff in iOS version of the app.

My setup is @ionic/vue@5.8.4 and @ionic/vue-router@5.8.4 (latest versions as of today)

I’m a little bit familiar with this issue by reading this article.
However, based on this article, the issue should covered by Ionic but it doesn’t seem to be the case on my end.

Here is what I already tried:

  • Using standard HTML div with @click="$router.push({name: 'routeName'})

  • ion-button with @click="$router.push({name: 'routeName'})

  • Vue router-link with :to="{name: 'Dish overview'}

I’ve also tried adding tappable attribute to all of the above cases with no difference.

It works great and with no delay on Android but the delay on iOS is really annoying.

Is there anything that could be done here to improve? Should I try using fastclick.js directly?

Hard to say what the issue might be without being able to reproduce it myself. Do you have a sample app I can try?

You should not need fastclick.js anymore with the introduction of touch-action in CSS.

You’re right, it does work correctly in a starter Ionic Vue app. So it must be something else in my app that is doing this.

I’m trying to remove everything in my app one by one to see what may cause this.
In my app I use TailwindCSS (base and utilities css from it). After removing TailwindCSS completely I see improvement and the delay is very short if any at all.

However, I’ve tried adding TailwindCSS to the starter app the same way I did in my app and the delay is also very short if any at all.
The fact that I don’t see much difference with or without TailwindCSS on the starter app makes me wonder if it might be something else, maybe something related with my app size in general. But then I would expect it to be as slow on the Android side as well but it is faster than iOS version even on a slower device.

I can’t share the code as it is too big of a project at this point and I still can’t recreate the issue completely on the starter app. If I get it on the starter app, I will definitely share the code.

Any tips on how could I debug this to make sure that it is actually TailwindCSS that is causing the problem and if so, what could I do to improve the situation?

One thing to check is if the click event is being delayed or if the click event is taking a long time to complete. Your browser dev tools can help with this.

Another thing to try is to add touch-action: manipulation to the element that you are clicking and see if that helps. Browsers add a 300ms delay to click event generation when the double tap to zoom feature is enabled. touch-action: manipulation disables this double tap to zoom feature which gets rid of the 300ms delay as a result.