背景と合成レイヤー
::before / fixed / will-change

背景は、要素の寸法に現れない

横方向のはみ出しを探すとき、ふつうは要素の位置と幅を測ります。

document.querySelectorAll('body *').forEach(el => {
  const r = el.getBoundingClientRect();
  if (r.right > innerWidth) /* 犯人候補 */;
});

この方法には限界があります。背景は要素の寸法に影響しません。 background-image がどれだけ広い範囲に敷かれても、 getBoundingClientRect() の値は変わりません。

body の背景は、どこまで敷かれるか

body に背景を指定すると、それはビューポート（キャンバス）へ伝播します。 html に背景が無い場合の既定の挙動です。

色ならこれで問題ありません。ところが繰り返しパターンだと話が変わります。

body {
  background-image:
    linear-gradient(rgba(0,229,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
}

縦に長い記事では、タイルが数千枚単位になります。 そしてモバイルでは、スクロール中にアドレスバーの表示が切り替わり ビューポートの寸法が変化します。 そのたびに、この広い範囲の塗りが再計算されることになります。

::before に逃がす — fixed と absolute

背景を body から擬似要素へ移すと、敷かれる範囲を指定できます。 ただし position の選び方で結果が変わります。

fixed の場合

body::before {
  content: "";
  position: fixed;
  inset: 0;              /* 常に1画面ぶん */
  z-index: -1;
  pointer-events: none;
  background-image: ...;
}

塗る範囲が最小になります。背景は固定され、内容だけがスクロールします。 薄い模様なら体感差はほぼありません。

absolute の場合

body {
  position: relative;     /* 基準にする */
  overflow-x: clip;       /* はみ出しを切る */
}
body::before {
  position: absolute;
  inset: 0;              /* body の寸法に追従 */
  z-index: -1;
}

基準が body になるのでスクロールバーを含みません。 一方で範囲は文書全体に戻るため、 overflow-x:clip を併せないと §2 の状態に逆戻りします。 実際、clip 無しで試したときは元の症状が再現しました。

z-index:-1 が背面に回るための条件

擬似要素を内容の背後に置くため z-index:-1 を使いますが、 これだけでは足りない場合があります。

body が重ね合わせ文脈を作っていないと、擬似要素は さらに外側の文脈（ルート）へ回ります。 すると body の背景色に隠れることがあります。

body {
  position: relative;
  z-index: 0;          /* これで重ね合わせ文脈になる */
}

z-index:0 は一見すると意味がなさそうですが、 position と組み合わさると重ね合わせ文脈を生成します。 これで z-index:-1 の行き先が body の中に確定します。

will-change: transform は、どこに書くか

will-change は「この要素はこれから変化する」とブラウザに伝える指定です。 transform を指定すると、多くの場合合成レイヤーへ昇格します。

昇格した要素は、描画がGPU側で完結し スクロール中の再計算から切り離されます。

擬似要素に書いても効かなかった

body::before {
  will-change: transform;   /* 変化なし */
}

body {
  will-change: transform;   /* これで安定した */
}

代償

背景は、どこに敷かれているか

4つの方式で、塗られる範囲がどう変わるかを比べます。 緑の格子が背景、灰色の枠が文書全体です。

fixed のときだけ、塗る範囲が1画面ぶんに収まります。 その代わり幅がスクロールバーを含む——このトレードオフが、 単一の正解に辿り着けなかった理由でした。

10手の記録

この症状を追うのに、10回の試行が必要でした。 推測で提示した仮説は5つ、当たったのは1つです。 同じ道を辿る人のために、外れた分も含めて残します。

まとめの早見表