Andorid標準ブラウザでiframeのスクロールがおかしくて久しぶりにキレちまった件
Androidのブラウザでiframe利用してコンテンツを表示した時に困った時の話。別にキレてないです。
前提
現象
- 初期表示では、radioボタンをポチポチチェックできる。
- 送信ボタンを押そうと下に引っ張ると、iframeの中がスクロールする。
- ここで問題が発生する。送信ボタンが押せないどころか、その状態でradioボタンを押すとチェックが入らない!!!
原因
- そもそもAndorid4とiframeは相性悪いらしい
- mixiでも同様のケースがあったっぽい
- 詳細な原因までは正直わからないが、要はこういう事らしい。
1. 初期表示の状態ではradioボタンを押せる
2. 一度スクロールすると、押せなくなる。
これは押せなくなってるんじゃなくて、初期表示の位置をタップしていると同義らしい。
実際に少しだけスクロールさせてradioボタンをクリックすると、上の方のradioボタンにチェックが入る。
対応
さてこれに対応するにはどうしたんもんかという話だが、要は「スクロールなんてしなくてもいいくらいにiframeの高さを調節すれば良い」という事だった。
その対応は、mixiさんが提示してるようにjsでiframe内の高さを取得して、iframeの高さを自動的に設定すれば良い。
ところがどっこいiframeはSameOriginPolicyによってサブドメインだろうが、port付きだろうが、httpsだろうが別ドメイン扱いなので、iframe内の情報を取得するのは無理ゲーだった。
はーマジなんなの?
というわけで、単純にiframeのheight属性をスクロールが発生しないであろう高めに設定するだけにした。もうiframeなんてなかったんやと思いたくなる珠玉の一品。
余談
どういう了見でこんな事になってるかまでは、ソース的なものが見つからなかったので、もし知ってたら誰か教えてください。
他に方法を無いかなと探した結果、yet antother的にcross domainのiframeの情報を取得する方法があったけど、どれもBKな感じがいなめないので、まだ試していない。
- http://stackoverflow.com/questions/5908676/yet-another-cross-domain-iframe-resize-qa
- https://github.com/house9/jquery-iframe-auto-height <- cross domain対応のヤツとかAlternatives が示されてる
- http://css-tricks.com/cross-domain-iframe-resizing/
ちなみに Androidの2.3.x系、Android4.2.x系では、この現象は発生しなかった。