I have a element where I utilize text-indent: 100%; and overflow: hidden; to conceal the text within it. This button is equipped with a click event. It functions smoothly on desktop computers, but when I test it on Google Chrome to simulate a mobile device, I encounter an issue with the button’s clickable area.
Here is a demo:
https://codepen.io/zangbianxuegu/pen/MWLbWPZ
It appears that a specific area（A small area to the right） of the button is unresponsive to clicks. The second button will be more obvious.
Why does this happen?
The issue is resolved when I remove the text-indent or overflow: hidden styles. Alternatively, using a element also eliminates this problem.
Note that it is in mobile mode