Androidのposition:fixed;とz-indexのバグ?

Android2.2以降のブラウザでは、position:fixed;が使えるのですが、かぶさった下の要素がクリッカブルな場合、z-indexを無視して下の要素が反応してしまうという腐ったバグにハマったのでメモ。

※確認はAndroidの標準ブラウザで

念のため、下になる要素をいろいろ用意して、absoluteとfixedで比較をしてみました。

検証端末

  • IS03(OS2.1)
  • IS06(OS2.3.3)
  • GARAXY S(OS2.2)
  • 007SH(OS2.)

同端末、OSのバージョン別は調べてません。

IS03はfixedで下の要素は全く反応しなかった。

結果

absolute fixed
a (inline) 枠・バイブ
a (block) 枠・バイブ
input type=text
input type=button バイブ
input type=submit バイブ
button (inline) バイブ
button (block) バイブ
select 枠・バイブ・選択box表示
label (inline) 対象要素に枠&フォーカス
(IS03のみ)
label (block) 対象要素に枠
onclick 枠・バイブ 枠・バイブ

あまり多くの端末ではみてませんが、端末による差もあるようです。。

fixedだけかと思ったら、absoluteで重なっている場合のclickも反応してました。
というよりも、ここで挙げてない端末ではabsoluteでもリンクにフォーカスがされてしまうようです。

回避策

cssのtap-highlight-colorで枠線をとったとしても、バイブが反応するためよろしくない。
また、select要素に限っては選択ボックスがちゃんと出てきちゃう始末。

javascriptでフォーカスがあたっららprevent.defaultとかしてみましたが、そもそもフォーカスのイベントが発火されてない。。。
どうしようかと思ったら、同じ悩みを無理矢理回避していらっしゃる方の記事があったので、こういう形で対応するしかないですかね。。

Android のブラウザのフォーカスが z-index を無視しているバグがなおらない

Androidのposition:fixed;とz-indexのバグ?