【CSS】contain: content; の考慮漏れ
はじめに
CSS の contain プロパティに関する個人的な失敗談です。
問題の対象
.post-title {
contain: content;
}contain: paint; （content / strict）は、要素が領域外へはみ出さないことを保証します。そのため、再描画が領域内に収まり、描画のコストが減少します。
基本的には、意図的にはみ出しにいかない限り要素が領域をはみ出すことはありません。そのため、ある程度気軽に追加できる項目のひとつです。ですが、落とし穴がありました。
問題
問題は、<a> / <input>などの focus を取得する要素です。要素が focus を取得するとブラウザは標準で要素に outline を描画します。そして、この outline は要素の領域範囲外に描画することがあります。
contain: paint; ありで outline を領域範囲外に描画した場合、 outline が描画されないか又は描画が途中で切れる表現になります。そのため、フォーカスを取得する要素に contain: paint; を使用するべきではありませんでした。
本件では、 contain: content; の使用に問題あったため、項目を削除することで問題を解決しました。
備考（outline の非表示）
outline を非表示にすることで問題を解決することもできます。ですが、キーボードユーザーを考慮するのであれば、標準のインタラクティブを削除すべきではありません。
備考（overflow: hidden）
overflow: hidden; も同様に outline に影響します。そのため、フォーカスを取得する要素に使用するべきではありません。