しるてく

技術的な話をします

Galaxy S2でiframe内の高さを動的に変えるとタップ位置がおかしくなる

android javascript

あまり検証していないのでメモ書き程度で。
余裕があれば、ちゃんとDEMO用意したいところ。

問題

iframe内でJSを使って動的にiframeの内容物の高さを変更したときに、Galaxy S2（以外もあるかも）で画面をタップすると、高さが変わる前にその位置にあった要素をタップした扱いになってしまう。

確認

とりあえずタップした位置をJSで取得してその位置にマークつけて確認。
こんな感じ。

javascript

// debug用
$(document).on('click', '#wrapper', function(e) {
  $('#tap-point').css({ top: e.pageY, left: e.pageX });
});

html

<div id="tap-point" style="position: absolute; z-index: 999; width: 30px; height: 30px; background-color: #fff;"></div>

対策

Androidではiframe内のコンテンツサイズによってiframe自体が自動拡大するんだけどそれがなんかおかしいのかなと思って、iframeの内容量に変更があったらiframeの高さを明示的に変更するjs書いたらなおった。

もしかしたらもっとよい（というかシンプルな）対策あるかも。

参考

Android4.0とiframeに書いてある以下の記述と同じかな。

js等で要素を位置移動しても、要素ないのタップ領域は移動前の位置に残る

http://blog.webcreativepark.net/2012/07/20-010104.html