Android4.1のセレクトの表示に対応する

インターファームの河森です。
本日は、スマホサイトのAndroid4.1対応のお話をしようと思います。

問題

当社が運営しているバイク比較ですが、
XPERIA(SO-04D)で見るとバイクメーカーのセレクトがこんな表示になっていました。

f:id:techinterfirm:20140227181233p:plain

これはどう見てもCSSのappearanceプロパティが原因だと思い、
影響しそうなCSSを削除しまくったのですが、全く解決せず。

bootstrapのCSSも全て消してようやく見たかったセレクタらしい▼マークが出てきました。

原因

ついにセレクタを拝めたので次は原因を探ります。
bootstrapのselectについているプロパティを一つずつ消して調べていきます。
そしてようやく判明したのは、なんとborderborder-radiusも同様です。
なぜかどちらか片方をなにか設定するとセレクタらしい見た目は消えてしまいます。

解決

これはAndroid4.1のブラウザのバグで、解決は難しいようなので、
逆にCSSで装飾してセレクタを再現します。

f:id:techinterfirm:20140227181316p:plain

うまくいきました!
ちなみにこのバグは、4.1以外のAndroidでは起きないようなので4.1かをJavaScriptで判定し、
4.1のときのみclassをつけています。

結論

Android4.1ではselectタグをデフォルトのまま使うか、
しっかり装飾します!

バイク買取、一番高い買取額は?バイク買取一括査定のバイク比較.com