Google Chromeでスクロールするとコンテンツの高さがずれた時の対処法

Cold Case

Cold Case

この記事はワタクシがWebデザイン時によく分からない不具合に直面した時、

よく分からない指定を付け足すと、よく分からないけど直った！みたいな…

病気になった時に原因は分からないけどバファリン飲んだら治った！みたいな記事です。

こういう場合を私は勝手に「コールドケース」と呼んでいます。（どうでもいい）

藁にもすがる思いの人は助かるかもしれません（笑）

スクロールするとbodyに対してfixしてある要素がずれる

普段はわりとわがままを言わないGoogleChromeでこの現象が起きました。

それもスマートフォンのみに起こった現象で、PC版のChromeでブラウザの幅を狭くしてもこの現象は起きませんでした。（モバイル用コンソールでは起こりました。）

クソブラウザ（Androidの古いブラウザ）では起こりませんでした（珍しい）

どんな事が起こったのかと言うと、

上部に固定してあるハンバーガーメニューがスクロールしたらほんのちょっぴり上にずれたんです…

ちょうど図にするとこんな感じ、

スクロールするとちょっとずれる…

ちなみに

• 下にスクロールしてメニューがずれた後、上にスクロールすると意図した位置に直る
• javascriptのページの最上部へ戻るボタンをタップすると最上部に戻ったあと少し下にずれる…

これはfixしてある要素がずれたっていうより

コンテンツ全体の高さがずれた感じなのかな？？

なんじゃこりゃぁぁぁ！＼(^o^)／

以前からスマホだとCSSのposition:fixed;の挙動が怪しいので

「やだなぁ～怖いなぁ～」と稲川淳二のように怖がってたのですが、結局よく分かりませんでした。

横にも余分な幅がある

スクロール時のずれはよくわからないけど、

コンテンツの横幅がデバイスの幅を何故か超えていたので、

とりあえずそっちの不具合を先に見てみようとソースコードとにらめっこしてたら、

どうもこれもよく分からない…

bodyにはoverflow-x:hidden;も入れてるのに何故はみ出てる？

どこかにWidth:100%;でpaddingまで入れてるなんて事はないぞ…

っとコンソールで内部の要素を1個ずつしらみっつぶしに削除しながら

余分な幅が消えるかどうかチェックして、

ある程度の原因である子要素まで突き止めたけれど…

結局わかんねーｗ

っという事である程度突き止めた要素に

overflow-x:hidden;をするという強行手段に出たわけです。

すると…

よしよし、余分な幅はなくなったぜ！

ってあれ？スクロールしたときのずれもなくなってる…だと！？

何か直った！

overflow-x:hidden;って横にしか効かないはずでは！？＼(^o^)／

横にはみでた物を非表示にする指定で

なぜ縦のずれが解消したんだ…？？

そしてワタクシは考えるのをやめた…

ということで解決策

はい、よく分かりませんが解決策

はみ出してるっぽい要素に以下のCSSを付け足す！

overflow-x :hidden;

するとモバイルのChromeでスクロールした時にfixしたはずの要素がずれるのが直ります。

誰か本当の原因とか直った理由とか教えてください（白目）…