iOS 16中<optgroup>标签label重复显示问题求助

在非iOS 16.0的iPhone设备上，以下<optgroup>示例代码显示正常：

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
    <optgroup label="Theropods">
        <option>Tyrannosaurus</option>
        <option>Velociraptor</option>
        <option>Deinonychus</option>
    </optgroup>
    <optgroup label="Sauropods">
        <option>Diplodocus</option>
        <option>Saltasaurus</option>
        <option>Apatosaurus</option>
    </optgroup>
</select>

但在iOS 16.0的iPhone 13 Pro Max上，<optgroup>的label会重复显示两次，这是iOS 16.0版本的系统原生渲染bug，可通过以下方式解决：

• 临时模拟分组（无需升级系统）
  用禁用的<option>模拟<optgroup>的分组效果，避开原生组件的bug：

  <label for="dino-select">Choose a dinosaur:</label>
  <select id="dino-select">
      <option disabled style="font-weight: bold; color: #666;">Theropods</option>
      <option>Tyrannosaurus</option>
      <option>Velociraptor</option>
      <option>Deinonychus</option>
      <option disabled style="font-weight: bold; color: #666;">Sauropods</option>
      <option>Diplodocus</option>
      <option>Saltasaurus</option>
      <option>Apatosaurus</option>
  </select>
  

  通过disabled属性让分组标题不可选中，用样式模拟原生分组的视觉效果，完全适配iOS 16.0。

• 升级iOS系统版本
  iOS 16.0之后的正式版本已经修复了这个<optgroup>重复渲染的问题，升级到iOS 16.1及以上版本后，原生<optgroup>即可正常显示。

• 使用自定义下拉组件
  如果无法升级系统，可采用纯前端实现的自定义下拉组件（基于HTML元素模拟select交互），完全脱离系统原生渲染逻辑，彻底避免此类系统bug影响。

内容的提问来源于stack exchange，提问作者Shohid_bd