facebook
Bug: Tap highlight effect on iPhone is throttled when button is rapidly tapped from React 17+
The tap highlight effect (a.k.a. -webkit-tap-highlight-color) on iPhone has been throttled if I tap the button rapidly from React 17+ (where events like onClick, onTouchStart work as expected no matter how quick I tap)
React version: 18.2.0
Steps To Reproduce
- Create a
<button>element in React App - Rapidly tap it on a mobile browser (any browser, my mobile is iPhone)
Link to code example: (open in a mobile browser) StackBlitz: React 18 (issue exists from 17+) StackBlitz: React 16 (issue does not exist, just for comparison)
Video
Problem exists: React18, React 17
Work as expected: Vue, React 16
The current behavior
From React 17, the tap highlight effect is throttled when the button is rapidly tapped, and events work as expected (as you can see from the counter)
The expected behavior
Work as the same in React 16, but please note that touch-action: manipulation need to be added to the button in v16 to prevent double-tap zoom-in.
Extra
I've tried on Safari, Firefox and Edge on my iPhone and they behave the same.
Tested on Vue, React, Vanilla JS and the problem only exists from React 17.
And also, touch-action: manipulation is not needed for React 17+ but is required for all others to prevent double-tap zoom-in, so this behavior may be relevant to the problem.
Extra guessing: Is it because event handling behavior changes at React 17? or the behavior of how react handling mobile page has been changed (since touch-action: manipulation is no longer needed after v17)?
I cannot find any related topics in the community so I had to raise an issue here, thanks.
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!