「直った」を、どう測るか
原因が3つ重なると、判定が壊れる

直したのに、直らない

自分のサイトを手元の端末で見ていて、気づきました。 ページを下へスクロールしていくと、途中から右側に余白ができる。 指を離すと戻ることもあれば、戻らないこともある。

CSS の問題だろうと見当をつけて、思い当たるところを直しました。直りました。 翌日また出ました。別のところを直しました。直りました。また出ました。

これを5回ほど繰り返して、ようやく気づきます。 「直った」という判定が、当てにならない。

スマートフォンだけで、追いかけた

症状が出るのはスマートフォンです。だから確認もスマートフォンで行いました。 手元にあったのは、この2つだけです。

いま振り返ると、この構成に決定的な穴がありました。 ただし、その穴に気づくのはかなり後になってからです。

測る道具を、自分で間違える

推測で直すのをやめて、計測することにしました。 画面幅を超えている要素を探す短いスクリプトを書き、コンソールで実行します。

document.querySelectorAll('*').forEach(el => {
  const r = el.getBoundingClientRect();
  if (r.right > innerWidth) hits.push(el);
});

3件見つかりました。すべて span です。直しました。 結果は変わりませんでした。

// 祖先のどこかで横がクリップされていれば、ページ幅には響かない
function contained(el){
  for (let p = el.parentElement; p && p !== document.documentElement; p = p.parentElement)
    if (getComputedStyle(p).overflowX !== 'visible') return true;
  return false;
}

直したスクリプトを実行すると、今度は 0件。 ところが症状は出ています。

効いたのか、たまたまか

対処を入れては確認する、を繰り返していました。 その判定はこうです——ページを開いて、余白が出なければ直った。

これで問題ない、と思っていました。実際、 多くの不具合はこの判定で足ります。原因が1つで、常に同じ結果が出るなら。

3層に重なっていた

最終的に分かった原因は、3つありました。

問題は③です。広告が配信されるかどうかはこちらでは決められません。 3箇所のうち全部埋まることもあれば、1つ空くこともある。 同じページを開いても、毎回条件が違う。

だから「直った」に見えた

①を直した状態で開くと、こうなります。

私が5回繰り返したのは、これでした。 効いた対処と、たまたま出なかった回を、区別できていなかったのです。

判定が壊れるところを、見る

3つの原因を個別に「直した」状態にして、 20回ページを開いたときの結果を並べます。 広告の配信率も変えられます。

①だけを直した状態にして、何度か引き直してみてください。 連続して緑が並ぶことがあります。そこで確認をやめれば、「直った」と判定します。 直っていないのに。

規則性が、見つかる

転機は、対処を思いつかなくなってから来ました。 ただリロードを繰り返して眺めていたら、広告の出方と症状が対応していることに気づきます。

3つ目が効きました。広告があるから悪いのではない。 全部消しても症状は出ないのですから。 埋まらなかった枠だけが問題でした。

見ていたものが、違った

原因が分かってから、§1 の構成に戻ります。 確認手段は2つありました。そのどちらにも、広告が無かったのです。

コンソールが使えるのはプレビューだけ。つまり 計測できる環境には、原因が存在しなかった。 アップロードした先では症状が見えるけれど、そこでは細かく調べられない。

ただし、この差は道具になる

真因が分かってから、対処を外す

③を潰したあと、それまでに入れた対処を1つずつ検証しました。 もう要らないものが混ざっているはずだからです。

2つ外せました。どちらも入れたときは効いたように見えたものです。

測れる状態を、先に作る

振り返ると、順序が逆でした。 直し方を考える前に、「直った」をどう判定するかを決めるべきだった。

1回開いて出なければ直った——この判定は、 原因が1つで、結果が毎回同じという前提の上に立っています。 その前提が崩れているのに気づかず、判定だけを使い続けたのが今回でした。