모바일 사이트에서 선택 상자를 만들 때 optgroup 요소를 사용하지 않는 것이 좋습니다.

베개

오늘은 모바일 사이트에서 선택 상자를 만들 때 optgroup 요소를 사용하지 않는 것이 좋을지도 모른다고 생각한 이야기를 씁니다.
주관도 섞여 있기 때문에 미안해.

주제

자, 본제에 들어갑니다. 양식에서 선택 상자를 만들 때 다음과 같이 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>

이 쓰는 방법은 보통의 웹 사이트라면 전혀 문제 없고, 오히려 친절이라고도 말할 수 있습니다만, iPhone의 Safari라고 select를 탭했을 때의 거동이 이상해집니다.
구체적으로는 탭할 때마다 selected 속성의 지정이 어긋나갑니다.
위의 코드라면, 탭할 때마다 「도쿄→지바→사이타마...」라고 마음대로 북상해 나가, 홋카이도까지 가서 처음으로 보통으로 조작할 수 있게 됩니다. 러시아까지 가지 않아서 좋았어!
이것은 Safari라고 할까 webkit계의 버그인 것 같네요.... htps : // 부 gs.ぇb t. 오 rg/쇼 w_부g. c기? 아니 d = 137261

드럼 롤 문제

또한 optgroup을 사용하면 이와는 다른 문제가 발생합니다.
이미지를 참조하십시오.
드럼 롤이 왼쪽으로 벗어납니다.
이것은 소위 UI/UX의 관점에서는 그다지 바람직하지 않다고 생각합니다.


optgroup 요소를 제거하면,

option으로 온 내용이 한가운데에 오므로, 조금 더 탭하기 쉬워졌습니다.

요약

그래서 모바일 사이트나 반응형 사이트, iOS 앱에 셀렉트 박스를 만들 때는 optgroup 요소를 사용하지 않는 것이 좋을지도 모른다고 생각한 대로입니다.
이상.