iOS 15 beta下HTML select元素点击后无选项列表弹出问题

问题说明 #

iOS 15 beta版本中点击HTML select元素后无下拉选项展示，控制台抛出错误：

Failed to present a context menu for configuration with identifier

该问题为对应版本WebKit内核的原生缺陷，非前端业务代码逻辑错误。

触发场景 #

常见可复现的场景如下：

• 页面存在position: fixed的顶层元素，遮挡了WebKit为上下文菜单预分配的渲染区域
• 全局或select元素父级配置了touch-action: none/touch-action: manipulation属性，干扰了select点击的事件回调链路
• select元素绑定的click/touchstart事件回调中调用了e.preventDefault()方法，阻断了原生下拉渲染逻辑
• 点击select的同时，页面有同步执行的DOM增删操作，抢占了上下文菜单的渲染线程

兼容修复方案 #

临时修复（适配beta版本测试用户） #

1. 调整层级与定位：移除select元素到顶层节点中不必要的position: fixed属性，若无法移除则给select元素设置不低于10000的z-index值
2. 覆盖touch-action配置：针对iOS 15版本单独给select元素添加样式规则：

@supports (-webkit-touch-callout: none) {
  select {
    touch-action: auto !important;
  }
}

3. 调整事件逻辑：移除select点击回调中不必要的e.preventDefault()，若需自定义逻辑改为异步执行，避免阻塞原生渲染：

const selectEl = document.querySelector('select')
selectEl.addEventListener('click', (e) => {
  setTimeout(() => {
    // 自定义业务逻辑
  }, 0)
})

官方修复说明 #

该缺陷已在iOS 15 Beta 4版本被WebKit团队正式修复，iOS 15正式版及后续所有系统版本均不存在该问题，若无需兼容beta版本测试用户，等待系统迭代即可。

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