Android4.1のセレクトの表示に対応する
インターファームの河森です。
本日は、スマホサイトのAndroid4.1対応のお話をしようと思います。
問題
当社が運営しているバイク比較ですが、
XPERIA(SO-04D)で見るとバイクメーカーのセレクトがこんな表示になっていました。
これはどう見てもCSSのappearanceプロパティが原因だと思い、
影響しそうなCSSを削除しまくったのですが、全く解決せず。
bootstrapのCSSも全て消してようやく見たかったセレクタらしい▼マークが出てきました。
原因
ついにセレクタを拝めたので次は原因を探ります。
bootstrapのselectについているプロパティを一つずつ消して調べていきます。
そしてようやく判明したのは、なんとborder
。border-radius
も同様です。
なぜかどちらか片方をなにか設定するとセレクタらしい見た目は消えてしまいます。
解決
これはAndroid4.1のブラウザのバグで、解決は難しいようなので、
逆にCSSで装飾してセレクタを再現します。
うまくいきました!
ちなみにこのバグは、4.1以外のAndroidでは起きないようなので4.1かをJavaScriptで判定し、
4.1のときのみclassをつけています。
結論
Android4.1ではselectタグをデフォルトのまま使うか、
しっかり装飾します!