モバイルサイトでセレクトボックスを作る際はoptgroup要素を使わないほうがいいかもしれない

枕

今日はモバイルサイトでセレクトボックスを作る際はoptgroup要素を使わないほうがいいかもしれないと思った話を書きます。
主観も混じっていますのであしからず。

本題

さて、本題に入ります。formでセレクトボックスを作るときには、下記のようにselect要素内のoption要素をoptgroup要素によってグルーピングすることがあります。

<select name="pref">
  <optgroup label="tohoku">
   <option value="1" > 北海道 </option>
   <option value="2" > 青森県 </option>
   <option value="3" > 岩手県 </option>
   <option value="4" > 宮城県 </option>
   <option value="5" > 秋田県 </option>
   <option value="6" > 山形県 </option>
   <option value="7" > 福島県 </option>
  </optgroup>
  <optgroup label="kanto">
    <option value="8" > 茨城県 </option>
    <option value="9" > 栃木県 </option>
    <option value="10" > 群馬県 </option>
    <option value="11" > 埼玉県 </option>
    <option value="12" > 千葉県 </option>
    <option value="13" selected> 東京都</option>
    <option value="14" > 神奈川県 </option>
    <option value="15" > 山梨県 </option>
  </optgroup>
</select>

この書き方は普通のwebサイトなら全く問題なく、むしろ親切とも言えるのですけど、iPhoneのSafariですとselectをタップした際の挙動がおかしくなります。
具体的にはタップするたびにselected属性の指定がずれていきます。
上のコードですと、タップするたびに「東京→千葉→埼玉...」と勝手に北上していき、北海道まで行って初めて普通に操作できるようになります。ロシアまで行かなくてよかったね！
これはSafariというかwebkit系のバグのようですね...。 https://bugs.webkit.org/show_bug.cgi?id=137261　

ドラムロール問題

さらに、optgroupを使うことはこれとは別の問題をも引き起こします。
画像をご覧ください。
ドラムロールが左にずれるんです。
これは所謂UI/UXの観点からはあまり好ましくないと思います。

optgroup要素を取り除くと、

optionでくくった中身が真ん中に来るので、さっきよりタップしやすくなりました。

まとめ

というわけで、モバイルサイトやレスポンシブサイト、iOSアプリにセレクトボックスを作る時にはoptgroup要素は使わないほうがいいかもしれないと思った次第です。
以上。