一、Bug确认 #

根据你描述的信息，这个问题的触发边界很明确：

• 受影响环境：Mac OS X 10.14系统 + Safari 13 Beta 2，以及Safari Technology Preview 92及后续版本
• 触发场景：仅在你的网站商品详情页，点击用于选择服装尺码的原生HTML <select> 下拉框时触发浏览器崩溃
• 排除场景：iOS 13系统下无此问题，其他网站未出现同类崩溃

二、可能原因分析 #

结合WebKit Beta版本的特性和你的场景，大概率是以下原因之一：

• WebKit渲染引擎在Beta版本的更新中，对原生<select>元素的处理逻辑引入了未被发现的Bug，尤其是当元素带有自定义样式或绑定了复杂交互时
• 你的网站可能对<select>做了深度自定义（比如用CSS隐藏原生下拉箭头、添加自定义弹窗逻辑，或者通过JS动态生成大量选项），这种自定义操作刚好触发了WebKit的内存泄漏或逻辑异常
• 不排除<select>的选项内容包含特殊格式（比如嵌入HTML片段、特殊字符），在Beta版的解析逻辑中引发崩溃

三、规避方案 #

1. 临时替换原生<select>（最直接有效） #

用纯前端自定义的下拉组件完全替代原生<select>，比如用<div>作为触发容器，<ul><li>模拟下拉选项，通过JS控制显示/隐藏状态，完全脱离WebKit对原生<select>的渲染逻辑，从根源上避免触发Bug。

2. 简化<select>的样式与交互 #

• 先移除所有针对<select>的自定义CSS（比如appearance: none、自定义背景、内边距等），恢复系统原生样式，测试是否还会崩溃。如果恢复后正常，再逐步添加样式，定位到触发Bug的CSS属性
• 暂时移除<select>上绑定的非必要事件监听（比如复杂的click前置校验、联动其他组件的逻辑），逐步排查是哪段代码引发了崩溃

3. 向Apple提交Bug反馈 #

通过苹果开发者后台的Bug Reporter工具，提交详细的复现信息：

• 崩溃日志（可从MacOS的控制台应用中导出）
• 页面中<select>元素的代码片段
• 精确的复现步骤
  这有助于Apple在正式版发布前修复这个问题

4. 针对受影响版本做兼容适配 #

通过JS检测浏览器版本，判断是否为受影响的Safari Beta/TP版本，如果是，则自动切换到自定义下拉组件；其他正常版本保留原生<select>，兼顾用户体验和兼容性。示例检测代码：

// 简单检测Safari版本
const isAffectedSafari = () => {
  const userAgent = navigator.userAgent;
  const safariMatch = userAgent.match(/Version\/(\d+)\.(\d+)/);
  if (!safariMatch) return false;
  const majorVersion = parseInt(safariMatch[1]);
  // 判断是否是Safari 13 Beta或TP 92+
  return majorVersion === 13 && userAgent.includes('Safari') && (userAgent.includes('Beta') || userAgent.includes('Technology Preview'));
};

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