Grid Layoutでブラウザバック時にレイアウトシフトが発生した

作成日時：2026-03-15
更新日時：2026-03-15

Google Chrome(PC)でのみ発生。

事象

Grid Layoutで要素を並べたことで、ブラウザバック時にスクロールの位置がずれた。

1. 画面A表示
2. 画面Aでスクロール
3. 画面Bに遷移
4. 画面Aにブラウザバック
   • この時に2の位置と異なる場所にスクロールした

下記の場合もずれた。

• 画面Aをリロード
• ハッシュがついた状態で画面AにURL直叩きでアクセス

原因

Grid Layout内の各要素の縦幅を固定しなかったため。
ウィンドウサイズによって、要素の横幅や縦幅が動的に変わるように定義した。

|1234|
↑幅が十分あるときは1列

|123|
|4  |
↑幅が小さくなると自動で改行

要素ごとの横幅が小さくなると、それに比例して要素の縦幅が変動する。
これによって全体の縦幅の計算がうまくできず(推測不可)、本事象が発生した。

他のブラウザは、おそらく縦幅が確定した後にスクロール位置を復元していた。

対応

要素の縦幅を固定する。

• grid: grid-auto-rows
• grid内要素: aspect-ratio
• grid内要素: height

知見

• ブラウザバック時はonloadが発火しないことがある
  • onpageshowなどを使う
• bfcache
  • ブラウザバック時にキャッシュを使用して高速で表示する
• スクロール位置を保存して、復帰時に適用するという概念

BFCache

Chrome。
ブラウザバック時における高速化手法。
このせいでレイアウトのずれやscriptが発火しなかったりする。

Chrome DevTool

パフォーマンスからレンダリングのスクショをとれる