androidのz-indexのバグ

スマートフォン向けwebアプリを開発中にz-indexを使うことになり、androidでうまく動かなかったのでメモ。

やりたかったのは、ボタンのonclickでポップアップのようにiframeを表示すること。

で実際にやってみたらiphoneだとうまくいくのだがandroid(galaxy s)だとうまく動かない。

（iframeの下にあるページのリンクもクリックできちゃう）

これはまずいということで、ググったら以下のページにあたった。

で、ここを参考にしようと思ったのだが、記事にもあるとおり

ただ、この方法ですと、onclick ハンドラが設定されている場合に対処できません (onclick ハンドラは、設定するだけで「フォーカス可能」な要素となるみたいです)。これについては対処方法が思いつかなかったのでひとまず放置されています

てわけで、今やろうとしてることには対処できない。

うーん、と悩んだ結果「iframeのリンクがある場所の下に、元のページのリンクがなければよい」という結論に至り、

「いっそのこと下のやつら全部display:none;しちゃうか」という同僚の一言で、下のやつらを全部display:none;に。

ただ、ポップアップ調にしているのでiframeの部分は元のページよりいくらか小さく、そのため下のやつらを消した瞬間に
下が思いっきりレイアウトを崩していた。

「じゃあonclickのタイミングで下に別画像を差し込めばいい」という同僚の一言で、画像を差し込むことに。

で、結局これでとりあえず望みどおり動いた。

今一正解かどうかわからない解決法なのだが、暫定処置である。

もっといい方法をご存知の方、是非ご教授ください。。。