Buttons show inappropriate blue background when tapped on touchscreen

[kisaragi-hiu]

This applies to all Chromium and WebKit-based browsers, including Capacitor on Android and presumably iOS.

On touch devices, these browsers show a tap indicator, but it is redundant for links and buttons inside an app that already have appropriate tap feedback. It can only be turned off via the nonstandard -webkit-tap-highlight-color property.

• https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic
• https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color

Tapping in Firefox Android: no superfluous tap effect around button (I forgot to enable tap visualization when recording)

tap-in-firefox-android.mp4

Tapping in the Android app (Capacitor): superflous tap indicator shows up around the button for a split second

tap-in-android-app.mp4

[kisaragi-hiu]

This is how Misskey handles this, for reference:

https://github.com/misskey-dev/misskey/blob/f9aed8f2bf994902386878d1212912caa3a57b0d/packages/frontend/src/style.scss#L112

And this is what React Native Web does:

https://github.com/necolas/react-native-web/blob/a0cd8ffba4ade1b5860164cb4ef89a652a68580f/packages/react-native-web/src/exports/StyleSheet/dom/index.js#L26

[spuithori]

Thanks for the feedback!
This is a matter that we are wondering if I should reflect.
TOKIMEKI does not implement visual feedback like native apps or rich frameworks, so accessibility may be lost if it is completely disabled.
Partially disabling it might be a good idea.