Android4.0とiframe

iframe内でコンテンツを展開するとAndroid4.0でシビレルくらい様々なバグが発生します。

弊社松田の調べによると見つけただけでも以下のような不具合があるようです(Galaxy Nexus調べ)。シビレますね。

a要素に display:block を指定しても、必ずインラインになる
position:fixed で配置した要素そのものがタップできない
document.body.scrollTop が取得できない
-webkit-tap-hightlight-color の指定が効かない
ページ内のアンカーリンクが効かない
ページの最下部に配置したa要素はタップはできるが、リンク遷移せず、イベントも発火しない
z-indexで下に重なる要素が、pointer-events の指定が全く効かなくタップできてしまう
js等で要素を位置移動しても、要素ないのタップ領域は移動前の位置に残る
alertが表示されない

これら、iframeに入れずに表示したら全てちゃんと表示されるものです。さらに！

AndroidのChromeにて、iframe内で表示させたHTMLの中で、position:absolute や fixed で配置した要素があると、そもそもページをスクロールできなくなる

期待の新星 Android Chromeもあまり優秀とは言えません。

僕も色々と検証しているのですが、event.touches[0].pageXの値がなんかおかしくかったり、Android(2.3含む)のバグとしてtouchendイベントがiframe外に移動した際に発火しないとかなりのシビレ具合です。リロードするたび挙動が変わったりします。謎です。もう麻痺するしかないです。

iframe使わなければいいんですが、iframeを使わなくてはいけない大人の事情(G的な)もあるんです。

スポンサードリンク

2012年7月20日 01:01
カテゴリー Android

«8月22日にスマートフォンサイト制作実践講座を行ないます。 | メイン | web creators特別号で執筆しました»

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

検索

著書: Web制作の現場で使う
jQueryデザイン入門
[改訂新版]

JavaScript
コーディング
ベストプラクティス

スポンサードリンク

最近のエントリー

Android4.0とiframe

関連エントリー

スポンサードリンク