みかづきブログ その3

3ヶ月つづけてみました。

IE10のselect要素のfocusにbackground-colorを設定するとが2回クリックしないと開かなくなる

マークアップをしていると、Android、IEの不思議な挙動を見つけることが多々あります。
こういったバグを見つけることを昆虫採集と呼んで日々ポジティブにデバッグをしているのですが、ひさしぶりにレアな昆虫(バグ)を見つけたのでテンション高くまとめておこうと思います。

ちなみに直近で1番テンションがあがったバグは、こちらです。

kimizuka.hatenablog.com

今回はこれと同じぐらいテンションが上りました。


現象

IE10でselect要素が1回クリックしただけでは開かない。


原因

IE10のselect要素の:focusに背景色を設定すると、1度目のクリック背景色の設定、2度目のクリックで選択となる模様。
背景色にデフォルト値であるtransparentを設定しても起こってしまうので注意。
尚、outlineやcolorを変更しても本現象は発生しない。


対策

select要素の:focusに背景色を設定したい場合はIE10以外のブラウザで効くようにCSSを書く。
IE10の際にデフォルト値(transparent)にするでは解決しないので注意。


DEMO

http://jsdo.it/kimmy/cLYP



ものすごくニッチなバグの情報ですが、いつかどこかで誰かの役に立てば幸いです。