Conversation
…active On touch, Chrome applies :active after a quick tap has already toggled the switch, so the knob shrank and popped back while sliding. Hold the pressed state from pointerdown to pointerup and mark the track with data-pressing (Base UI uses data-pressed for a lasting on/open state), keeping the look from ADR-0067. Recorded in ADR-0113. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
kazuemon
force-pushed
the
fix/switch-color-flicker
branch
from
September 18, 2026 00:24
f751376 to
dc2a8e3
Compare
kazuemon
changed the title
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
現象
タッチで速く押すと、トグルのノブが切り替わったあとに縮んで戻る（ADR-0112 の色のちらつきを調べる途中で見つけたもの。色の件は #16 で直した）。
原因
ノブの縮み（押しているあいだ 0.92 倍）と行の塗りを CSS の
:activeで付けていた。Chrome はタッチで速く押すと、スクロールと区別するために:activeを指を置いた瞬間には付けず、離したあと（click の直後）に 100〜150ms だけ付ける。付くかどうかは押し方で変わる（再現で 5 回押すと 2 回）。トグルは離した瞬間に切り替わるので、ノブが滑り始めてから縮み、130ms ほどして戻る。マウスでは起きない。直し
:activeではなく pointer イベント（pointerdown〜pointerup・pointercancel・pointerleave）で部品が持ち、トラックにdata-pressingを付ける（src/components/switch/use-pressed.ts）。Base UI がdata-pressedを「ON・開いている」に使うので別の名前data-pressingで作る:activeも同じ挙動になりうるので、backlog に残した確かめ
pnpm typecheck・pnpm lint・pnpm format:check・pnpm test src/components/switch（7 件）🤖 Generated with Claude Code