【開発者向け】Android 2.3系でページがスクロールできなくなる不具合について

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

問い合わせがあり、半日ほど煮詰まったので記録として。
スマートフォンサイトを公開していて、Androidのバージョン2.3系でのみページがスクロールできなくなる不具合に遭遇しました。

不具合の内容

Android2.3系でスマートフォンサイトを開いたときのみ、ページをスクロールすることができない。
その他のAndroidのバージョンでは問題なくスクロールできる(全て実機で確認済み)

参考サイト

「Android 2.3 スクロール」で検索したところ、出てきた以下のサイトを参考に問題の切り分けを行いました。

Androidでスクロールできなくなるバグ|WEBdev
Androidで全くスクロールできないバグ|スマートフォンサイト制作ブログ
Androidのブラウザで特定条件でスクロールできなくなるバグ|ういはるかぜの化学

バグの発生条件と現況の比較

スマートフォンサイト制作ブログからの引用になりますが、バグの発生条件は

1.HTML内のどこかにiframeが用いられている。
2.ひとつ以上のiframeが非表示になっている。
3.Android端末

の3点のよう。

しかし!当スマートフォンサイトではiframe(youtubeの埋め込みとか)を一切使用していないのです!
どのサイトを巡っても「バグの原因はiframeの非表示」とのこと…
だからiframe使ってないんだよう!どこー!

と半日涙目でコードとにらめっこしていたら、ここではないか?というポイントを発見。

原因となっていたコード

スマートフォンサイト専用のstyle.cssに記述していた、はみ出し対策としての

/* はみ出し対策 */
body {
width:100%; 
overflow:hidden; 
}

ここの「overflow:hidden;」が原因の様子。

試しにこの「overflow:hidden;」をコメントアウトしたところ、Android2.3系実機で見事スクロールできるようになりました。ヤッター!!

はみ出し対策

しかし、このままではiPhoneやその他のAndroid機でページがはみ出してしまうので
ちょこっとだけHTMLとCSSを修正。
body直下に #wrapper というdivを作ってくくり(class・ID名はなんでもいいです)

#wrapper {
overflow:hidden;
}

をかけてやります。

これでその他のスマートフォンでもはみ出さず、かつAndroid2.3系でもスクロールできるようになりました!ヤッター!!!

まとめ

今回該当のスマートフォンサイトでは旧型のスマートフォンを切り捨てることができないので、実に四苦八苦しました…。
Android2.3系はIE6くらいにやっかいなやつなのかもしれません。わかんないけど。

つまり、Android2.3系はページスクロールそのものを overflow として見てしまうということなのかもしれません(友人のコメントより追記)

スマートフォンサイト制作では overflow:hidden; の指定には要注意ということですな。
これでもうトラブルは起きないといいのだけれどなー。

ありがとうございました。

【開発者向け】Android 2.3系でページがスクロールできなくなる不具合について” への1件のフィードバック

  1. 大変お世話になりました。
    全く同じような現象、とあるアンドロイド端末とPC画面のみスクロールができなくなり・・
    困り果てていたところのこちらの記事で大助かりでした。
    ありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。