長年webの開発をしてきましたがはじめてタイトルのようなことが発生して苦労したので詳細をまとめます。
結論
結論としてはまさかの
「PCを再起動したら治った」
でした。
一体何がどうだったのかを次にまとめます。
何が起こったか
開発を終えて、Chromeで動作確認をしているときに
「縦スクロールはできるが、横スクロールはできない」
という謎の状態にぶち当たりました。
テストしてたのはスマホ用のページだったので、ブラウザのデベロッパーツールからiPhoneにシミュレートしてテスト中でした。
なんだろうと思い、PCのサイズで表示すると問題なくスクロールできる。
スマホ実機で動作確認すると問題なくスクロールできる。
つまり、
「PCでは動く、スマホでも動く。でも、PCデベロッパーツールでは動かない」
という状態。
この状態が解消されなくても困らないと言えば困らないのでしょうが、とても気持ち悪い状態だったので何が原因なのかを調べ始めました。
まずやってみたのは該当箇所だけを切り出して1ファイルにし、そのファイル上で再現できるかどうか。
結果は再現されず。
少しずつ範囲を広げて、最終的には１ファイル全部切り出してテストしたものの再現されず。
対象のファイルのみ発生しているという謎の状態。
そこで、シークレットモードで同ファイルを開いてみたところ再現されず。
これはブラウザが問題なのでは？
ということで他のブラウザで試したところ再現されず。
そこで、Chromeの拡張機能をOFFにしたりキャッシュをクリアしたり、
思いつく限りのことをやってみましたが、Chromeのデベロッパーツールでのシミュレートでは再現されてしまう状態が続きました。
最終的にPCを再起動したところ再現されなくなりました。
一体何だったのだろうか。
同じような現象に悩まれた方はブラウザ固有の問題の可能性を考えてみてはいかがでしょうか。