Hatena::Groupsubtech

ういはるかぜの化学

Sunday, July 01, 2012

Androidブラウザで特定条件でスクロールできなくなるバグ 18:09 Androidのブラウザで特定条件でスクロールできなくなるバグ - ういはるかぜの化学 を含むブックマーク はてなブックマーク - Androidのブラウザで特定条件でスクロールできなくなるバグ - ういはるかぜの化学

Android 2系のブラウザサイトでページのロードが完了するとなぜか突然スクロールできなくなることがあるという問題があり調べてみたというお話

バージョンはあんまり詳しく調べてないのですが2.3.xではおこっていて、一部のメーカーの端末だとおこらないということもあるようです(007SH, 102SH, Xperia ray/なんとか(忘れた)等で再現)。


再現条件

で、どういうことだったのかというと以下の再現条件がそろうとスクロール不能になります

  1. meta要素でviewportの指定がされている
  2. iframe要素がある
    1. iframe要素で読み込んだページのbody要素が overflow: hidden になっている
  3. iframe要素または親の要素が display: none になっている

再現ページ: http://mayuki.github.com/Test/4.html

どういうときにおこるの?

こんなややこしいことしないと思うところですが「スマホサイト(1)でFacebookのいいね!ボタンを設置して(2, 2.1)、シェアするボタンを押すまで隠しておく(3)」という条件で簡単に起こってしまうのでした。

手元ではFacebookのいいねボタンだったのですが別なとあるサイトではGoogle+ボタンスクリプトがやはり同じようなiframeを作り出していて問題になっていましたのでちょっと油断すると発生する可能性があります

対処方法

これは普通バグなのでdisplay: noneしないぐらいしかないです。

できるのであればDOMツリーから一度外しておくという手もあるかもしれませんが、ソーシャルボタンのように誰がいつ差し込むのかわからないもの場合そうはいかないですね。

トラックバック - http://subtech.g.hatena.ne.jp/mayuki/20120701