jQueryMobile：PCで見ると謎の2本目のスクロールバーが出る

こんにちは、さち です。

jQuery Mobile で作ったサイトを PC の Chrome で表示すると
謎の2本目のスクロールバーが表示される現象にあいました。

今回は、その解決方法について書いていきます。
完全に需要無視のほぼ自分専用備忘録です。
本当にありがとうございました。

Chrome で出る謎の2本目のスクロールバー

1. iPhone の Safari で「スクフェスツールズ」を表示した状態。
   スクロールバーは一本だけです。
   
2. 今度は、PC の Firefox で表示した状態。
   こちらもスクロールバーは一本だけ。
   
3. しかし、PC の Chorme で表示をすると
   なぜか謎の2本目のスクロールバーが出てくる…。
   

Internet Explorer でも調査してみると
同様に2本目のスクロールバーが出る現象を確認。

余分なスクロールバーが出るだけでサイトは普通に使えるし
元々がスマホ用サイトということで
スマホでの使用に問題がないなら放置でもいいかな。

…と思ったのだけど
PC でアクセスしてくれる人も意外といるので直します。

原因は「overflow-x」

1. Chrome の「デベロッパーツール（Ctrl + Shift + I）」を使って
   スクロールバーが表示されている要素を選択。
   
2. 「overflow-x: hidden;」が怪しい。
   
3. 試しに、チェックを外して無効化してみると…
   
4. 無事、スクロールバーが1本になりました。
   
5. ということで、jQuery Mobile の CSS を上書きして修正完了。
   

以前、「overflow-x」は IE の 独自CSS だったのに
いつの間にか CSS3 に組み込まれていたんですね。
どうりで Chrome でも「overflow-x」が表示されるわけです。

でも、「overflow-x」は横方向のはみ出しについての設定。
しかも、「hidden」だから隠れるだけのはず。
どうして縦方向のスクロールバーが出てしまったのだろう？
よく分からない…。

最新の jQuery Mobile だとこの現象は出ないのかも。