Firefoxでフォームコントロールのフォーカスリングが白くフラッシュする問題を修正

Firefoxでダークモード時にフォームコントロールへフォーカスすると、フォーカスリングが一瞬白く光るバグを修正しました。outline プロパティ全体をトランジションさせる代わりに outline-color のみをアニメーションさせ、初期値として透明なアウトラインを常時適用することで、ブラウザのシステムスタイルからの補間を回避しています。

背景

Firefoxのダークモードで <wa-input> をクリックすると、フォーカスリングが白く点滅してからブランドカラーに遷移するという視覚的なノイズが発生していました。issue #2074 として報告されたこのバグは、Shoelace の sl-input と比較すると特に目立ちました。Shoelace ではフォーカスカラーがスムーズにフェードインするのに対し、Webawesome では白いフラッシュが挟まる状態でした。

この現象はFirefox固有の挙動に起因します。Firefoxは outline プロパティ全体をトランジション対象にすると、フォーカス前の「システムデフォルトのアウトライン色（白やシステムカラー）」からカスタムカラーへと補間しようとします。フォーカスリングが未定義の状態から突然適用される設計だったため、Firefoxがシステムスタイルを補間の起点として使用してしまっていました。

技術的な変更

修正の核心は「アウトラインを常時存在させ、色だけをアニメーションさせる」パターンへの統一です。input・number-input・select・textarea の各コンポーネントスタイルと native.css の計5ファイルが同一の方針で変更されています。

変更前: outline ショートハンドプロパティ全体をトランジション対象としており、フォーカス時にアウトラインを丸ごと設定していました。

transition:
  background-color var(--wa-transition-normal),
  border var(--wa-transition-normal),
  outline var(--wa-transition-fast);

&:focus-within {
  outline: var(--wa-focus-ring);
  outline-offset: var(--wa-focus-ring-offset);
}

変更後: 常時 transparent なアウトラインを初期値として設定し、フォーカス時は outline-color だけを切り替えます。

transition:
  background-color var(--wa-transition-normal),
  border-color var(--wa-transition-normal),
  outline-color var(--wa-transition-fast);

outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) transparent;
outline-offset: var(--wa-focus-ring-offset);

&:focus-within {
  outline-color: var(--wa-color-focus);
}

あわせて border ショートハンドから border-color への変更も行われています。border 全体をトランジションさせると border-width や border-style も補間対象になるため、こちらも同様の理由でカラーのみに絞っています。

input と number-input では、Shadow DOM の :host(:focus) に outline: none を追加する変更も含まれています。これはホスト要素自体にブラウザがデフォルトのフォーカスアウトラインを描画することを防ぐためです。フォーカスリングの描画は内部の .text-field / .number-field 要素側で制御するため、ホスト要素側のアウトラインは不要です。

設計判断

「アウトラインを常時存在させ、色のみをアニメーションする」 アプローチが採用されました。

トランジションは「値Aから値Bへの補間」であるため、起点となるAの値が明示されていないとブラウザはシステムデフォルトを参照します。transparent を初期値として明示することで、Firefoxが補間の起点にシステムカラーを使用する余地をなくしています。outline-color: transparent はレンダリングコストがほぼゼロである一方、この問題を根本から解消できます。

ショートハンドプロパティ（border・outline）からロングハンドの border-color・outline-color へ移行する判断も一貫しています。ショートハンドをトランジション対象にすると、変化させる意図のないプロパティ（width・style）まで補間対象に含まれ、意図しない副作用のリスクが生じます。カラーのみを明示的にトランジションさせる設計は、ブラウザ間の挙動差異を制御するうえでも堅牢です。

まとめ

Firefoxのシステムスタイル補間という落とし穴に対し、「アウトラインを常時保持し色だけを変化させる」という明快な解法が採用されました。ショートハンドから個別プロパティへの移行という小さな変更が、ブラウザ固有の挙動差異を排除し、全フォームコントロールで一貫した視覚的体験をもたらしています。