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のバグ?

iPhoneとAndroidでUA判定する

iPhone/Androidで微妙にCSSを変えたい事が多いので、bodyにUAを判定してclassを設定するJavaScriptのメモ。

.iosとか.androidを起点にCSSを追加するだけでいいので結構便利。

本来ならもっと細かくUAを振り分けてもいいけれど、iPhoneかAndroidか程度で十分なので重宝してます。

1
2
3
4
5
6
7
8
9
(function(){
	var agent = navigator.userAgent,ua = '';
	if(agent.search(/iPhone/) != -1){
		ua = 'ios'
	}else if(agent.search(/Android/) != -1){
		ua = 'android'
	}
	if(ua) document.querySelector('body').setAttribute('class',ua)
})();
iPhoneとAndroidでUA判定する

jQuery1.7で追加されたon/off。

気づけばjQueryも1.7が出てましたw。
おいおい追加された機能を調べて行くけどon/offは分かりやすかったので取り敢えずまとめておく。

簡単に言うと、今までのイベントのバインドメソッドが一つにまとまりましたよ〜。という感じ。

jQueryでこれまで使えたイベントのバインドメソッド

  • $(ele).bind(fn)

    各要素それぞれにイベントをバインド

  • $(ele).live(fn)

    $(document)にイベントをバインド。bubblingで上がってきたイベントの発生元とセレクタの一致をチェックして、一致してたら発火。

  • $(ele).delegate(selector,fn)

    liveの強化版。$(document)ではなく任意の要素にイベントをバインドして、bubblingをチェック出来るようになったやつ。

それぞれ使い分けするにしても、イベントのバインドだけで3つ(unbindするメソッド入れると6つ)もあってコードが読みづらかったのを、on/offですっきり!という感じでしょうか。

これまでのイベントのバインドをon/offで書き直す

  • bind
    $( 'button' ).bind( 'click',fn);
    ↓
    $( 'button' ).on( 'click', fn);
  • live
    $( 'button' ).live( 'click',fn);
    ↓
    $(document).on( 'click','button', fn)
  • delegate
    $( '.sample' ).deligate( 'click','button',fn);
    $( 'sample' ).on( 'click','button', fn)

どの要素にイベントをバインドしてるか、直感的に分かりやすくなってていいですね。
今後は全部on/offで書いた方が可読性も増しそうです。

jQuery1.7で追加されたon/off。