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

2016年9月30日
とっつぁん
css WEBデザイン 未解決事件
この記事は 3 分くらいで読めると思います
Cold Case
Cold Case

Cold Case

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個ずつしらみっつぶしに削除しながら

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

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

 

結局わかんねーw

 

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

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

 

すると…

 

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

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

 

何か直った!

何か直った!

 

overflow-x:hidden;って横にしか効かないはずでは!?\(^o^)/

 

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

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

 

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

 

ということで解決策

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

 

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

overflow-x :hidden;

 

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

 

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