Andorid標準ブラウザでiframeのスクロールがおかしくて久しぶりにキレちまった件

Androidのブラウザでiframe利用してコンテンツを表示した時に困った時の話。別にキレてないです。

前提

  • Android OSは 4.0.3
  • iframeで読み込むコンテンツはサブドメイン
  • iframeのコンテンツは親frameに収まらずにスクロールする。
  • iframeのコンテンツはフォーム的なもんが表示

現象

  • スマホ(Android 4.0.3)でiframeが存在するページを表示してフォームが表示されていた。
  • 画像の通り、radioボタンが並んだ縦長のフォームを表示している。


  • 初期表示では、radioボタンをポチポチチェックできる。


  • 送信ボタンを押そうと下に引っ張ると、iframeの中がスクロールする。


  • ここで問題が発生する。送信ボタンが押せないどころか、その状態でradioボタンを押すとチェックが入らない!!!

原因

  • 詳細な原因までは正直わからないが、要はこういう事らしい。

1. 初期表示の状態ではradioボタンを押せる
2. 一度スクロールすると、押せなくなる。

これは押せなくなってるんじゃなくて、初期表示の位置をタップしていると同義らしい。
実際に少しだけスクロールさせてradioボタンをクリックすると、上の方のradioボタンにチェックが入る。


対応

さてこれに対応するにはどうしたんもんかという話だが、要は「スクロールなんてしなくてもいいくらいにiframeの高さを調節すれば良い」という事だった。

その対応は、mixiさんが提示してるようにjsでiframe内の高さを取得して、iframeの高さを自動的に設定すれば良い。

ところがどっこいiframeはSameOriginPolicyによってサブドメインだろうが、port付きだろうが、httpsだろうが別ドメイン扱いなので、iframe内の情報を取得するのは無理ゲーだった。

はーマジなんなの?

f:id:tell-k:20140426132610p:plain

というわけで、単純にiframeのheight属性をスクロールが発生しないであろう高めに設定するだけにした。もうiframeなんてなかったんやと思いたくなる珠玉の一品。

余談

どういう了見でこんな事になってるかまでは、ソース的なものが見つからなかったので、もし知ってたら誰か教えてください。

他に方法を無いかなと探した結果、yet antother的にcross domainのiframeの情報を取得する方法があったけど、どれもBKな感じがいなめないので、まだ試していない。

ちなみに Androidの2.3.x系、Android4.2.x系では、この現象は発生しなかった。