チームメンバー「なんかデザイン崩れてません？」
僕「いやいや、そこのスタイル最近いじってへんで...」
と思いつつページを確認してみると、やはり崩れていない。
お手上げ🤷完 ...🚶♀️➡️
🚶♂️...
としたいところですが、さすがに見過ごせないので調べてみました！
対象読者
- 主にフロントエンド開発者
- アコーディオン機能（折りたたみ要素）のあるサービスを運用している方
- Chrome の最新バージョンのサポートを公言しているサービスを運用している方
デザイン崩れが発生していた箇所
<details>
<summary>...</summary>
...
</details>
このように、details 要素を用いたアコーディオンコンポーネントでのみデザイン崩れが発生していました。
特定の要素のみデザインが崩れるなんておかしい、、、ということで、エラー報告してくれたチームメンバーが確認した Chrome のブラウザバージョンを教えてもらいます。
すると、Chrome 131 とのこと。本日（2024/11/15）時点の最新バージョンです。
そして崩れていない僕の Chrome バージョンはというと、 Chrome 130。
事件の臭いがするぜ。。。
Chrome 131 の新機能を確認する
目次を見てみます。
必知事項は次のとおりです。
- CSS ハイライトの継承が変更されます。
- <details> 要素のその他の CSS スタイル。
- ページの余白ボックスで印刷レイアウトを簡単に設定できるようになりました。
- 他にも多数の機能があります。
なるほど（〇-〇ヽ）ｸｲｯ
今回においてはCSSの変更が多そうですね。
その中に <details> 要素のスタイルについての言及がありますね、、、事件です。
再現性を確認する
再現性を確認しなければ直すにも直せないので、Chrome のバージョンを最新化します。
Chrome 131 にアップデートし、該当ページを確認します。
...再現した！！！
共有してもらったページ以外にも、<details> を使用している箇所でデザイン崩れが発見されました。
では、実際にどういうケースでデザイン影響があったのかを紹介します。
デザイン崩れが発生した箇所のスタイルとその修正の diff
※簡略化して記載しています。
ケース１
<details class="details1">
<summary class="summary1">...</summary>
...
</details>
.details1 {
display: flex;
flex-direction: column;
- align-items: flex-start;
+ align-items: stretch;
width: 100%;
}
.summary1 {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #000;
}
このケースでは、 .summary1 がアコーディオンの横幅いっぱいに表示されなくなっていました。
border を付与していたので、デザイン崩れが顕著に現れました。
align-items: stretch させることで元のデザインに戻します。
ケース2
<details class="details2">
<summary class="summary2">...</summary>
...
</details>
.details2 {
display: flex;
- align-items: center;
+ flex-direction: column;
+ align-items: stretch;
justify-content: space-between;
overflow: hidden;
}
.summary2 {
display: flex;
- flex: 1;
align-items: center;
}
このケースでは、アコーディオンを開いた時に details と summary が縦並びになっていたところ、横並びに変わりました。
flex-direction: column で縦並びに戻し、ケース１と同様に align-items: stretch させます。
なぜこのようなことが起きたか
<details> 要素において、フレックスレイアウトの挙動が Chrome のバージョン <=130 と >=131 で変更されたことに尽きます。
先ほど紹介したケース２が分かりやすいですが、本来フレックスレイアウトを縦並びに配置するには flex-direction: column; が必要ですが、今まではそれが無くとも縦並びとして機能していたということです。
つまり、Chrome 131 で <details> に本来のフレックスレイアウトの機能が適用されるようになったわけですね（制限緩和）。
お前の書いたCSSが悪い！と言われたらそれまでなのですがw
僕が担当しているプロジェクトはFigma Dev Modeを用いてスタイリング作業ををほぼコピペで済むように効率化しているのもあり、同様の現場では割と起きうる事案かなと思います。
まとめ
ブラウザのアップデートがデザイン崩れを起こすという現場に初めて直面しましたw
利器に頼って適切なCSSを書けていなかったという反省もありつつ、
- すぐに Chrome のバージョンが原因だと当たりを付けられたこと
- 不幸中の幸いで、対象のページが本番リリース前だったこと
は良かったことと言って差し支えないかなと思います。
Visual Regression Testing を CI に組み込み、最新バージョンのブラウザでデザイン崩れが起きていないかを都度確認するなど、再発しないような仕組みを考えたいところです。
Chrome 131 では <details> だけに限っても、擬似要素を使えるようになったり横並びの折りたたみ要素を作れるようになったりと、イケてる機能がたくさんあるようなので、興味のある方は詳しく読んでみてください！
皆さんの本番運用するサービスが崩れてないことを祈る🙏
Discussion