Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: content global click listener causing issues at scale

See original GitHub issue

Prerequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v4.x
v5.x
v6.x

Current Behavior

The ion-content component uses a click event listener to prevent clicks while scrolling.

https://github.com/ionic-team/ionic-framework/blob/6309d5ddbaa7da5e37eda4e19866baf380069578/core/src/components/content/content.tsx#L122-L128

This was added in version 4.x to fix an issue described as “tap-click deadlock”. I’m not exactly sure what that means. The PR doesn’t really include a useful description or tests to explain what the functionality adds/fixes. However, there is a list of issues in the PR that are related to click functionality misbehaving while scrolling that were closed in effect:

fix(content): tap-click deadlock #17170

I’ve found that this event listener drastically decreases click performance with increasing amounts of DOM nodes within the ion-content component. Particularly in Webkit browsers which seem to handle event listeners that originate from a parent element differently than Chrome. Even with virtual scrolling added, the UI just feels slow and buggy when clicking. The only real solution that I’ve found is to not use ion-content but that would mean losing all the benefits of that component. Such as tapping the nav to scroll to the top of the page or using other components that should be children of ion-content like ion-refresher and ion-infinite-scroll.

Expected Behavior

If this code is no longer needed for current browser engines it should be removed, or allow developers to control this behavior with a setting in IonicConfig. For my purposes, I don’t really need to block clicks while scrolling.

Steps to Reproduce

You can test these this StackBlitz links in Chrome and Safari. Both browsers are slower with ion-content but Safari is much worse.

Ionic Info

I’m using the latest version.

Additional Information

No response

Issue Analytics

State:
Created 2 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

tlaverdurecommented, Dec 10, 2021

Gonna test it out in a sec, thanks for the quick response!

0reactions

ionitron-bot[bot]commented, Jan 12, 2022

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.