From 7f4da24fe9d357f36561da6968bb87d59945c000 Mon Sep 17 00:00:00 2001 From: Christophe Besson Date: Wed, 26 Aug 2026 01:54:30 +0200 Subject: fix(hub): disable Android's default tap-highlight flash MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The :hover/:focus fix in 909505f didn't fully clear the "stuck pressed" look reported on mobile Chrome: screenshots showed the music player's "next" button (which carries no state class in the JS at all — not .active, not .music-player-play) filled with a solid accent-blue circle after a tap, and the same on "repeat". Neither :hover (already scoped to `hover: hover`) nor the default focus outline (already cleared for non-:focus-visible) produces a filled background, so neither explained it. Third, separate mechanism: -webkit-tap-highlight-color, Android's own touch-feedback flash, never disabled anywhere in this stylesheet. Left at its default, many Android builds tint it from the OS accent colour, which is why it read as "the app's own blue" rather than an obviously foreign highlight. Unrelated to real :hover/:focus, so disabling it carries no keyboard-accessibility tradeoff at all. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_013XSohfUQQiaE77qyFLgSv3 --- packages/meshbay-hub/src/meshbay_hub/static/style.css | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'packages/meshbay-hub/src') diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index 5748b2d..f426f8d 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -58,6 +58,16 @@ the leftover from a pointer/touch interaction, never accessibility. */ :focus:not(:focus-visible) { outline: none; } +/* A third, separate mechanism from :hover/:focus above, found live + 2026-08-26 (screenshots): Android Chrome's own tap-highlight flash — + never disabled anywhere in this file — filled a tapped round button + (music-player-btn's "next", which carries no state class at all) with a + solid colour that stayed until another element was tapped. Left at its + default, this shade is drawn from the OS accent colour on many Android + builds, which is why it read as "the app's own blue", not an obviously + foreign highlight. Unrelated to real hover/focus — safe to kill outright. */ +*, *::before, *::after { -webkit-tap-highlight-color: transparent; } + body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg-base); -- cgit v1.2.3