jQuery UI SelectMenu组件在Chrome 124版本中的兼容性问题分析

问题背景

近期，jQuery UI项目中的SelectMenu组件在Chrome 124版本中出现了一个严重的兼容性问题。当用户尝试与下拉菜单交互时，浏览器会显示"status-stack-overflow"错误提示，导致组件无法正常使用。

问题表现

该问题主要出现在Chrome 124.0.6367.62及相近版本中，影响范围包括：

• Chrome稳定版124.0.6367.62
• Chrome Beta 125.0.6422.4
• Chrome Canary 126.0.6433.0

有趣的是，这个问题在不同硬件配置的设备上表现不一致。例如，在M2 Pro芯片的MacBook Pro上可以复现，而在M3 Max芯片的同型号设备上却无法复现。此外，Windows 10系统上的Edge浏览器(基于Chromium)也报告了相同问题。

问题根源

经过调查，这个问题实际上是Chromium浏览器引擎的一个bug，与jQuery UI本身无关。该bug影响了多个大型前端框架，Chromium团队已经将其标记为高优先级问题。

问题的核心在于浏览器处理aria-owns属性时出现了堆栈溢出错误。aria-owns是WAI-ARIA规范中的一个属性，用于建立元素之间的所有者关系，辅助屏幕阅读器等辅助技术理解页面结构。

临时解决方案

对于急需解决问题的开发者，可以采用以下临时解决方案：

1. 手动移除aria-owns属性：在组件初始化后，手动从生成的span元素中移除aria-owns属性。这会破坏部分无障碍功能，但可以恢复基本交互。

2. 降级浏览器版本：暂时回退到Chrome 123或更早版本。

官方修复

Chromium团队在124.0.6367.91及更高版本中修复了这个问题。经测试，124.0.6367.93版本在macOS上已经可以正常工作。

技术启示

这个事件给前端开发者带来几点重要启示：

1. 浏览器兼容性问题的复杂性：即使是成熟的浏览器引擎，也可能引入破坏性变更，影响广泛使用的UI组件。

2. 无障碍属性的重要性：虽然移除aria-owns可以临时解决问题，但这会损害网站的无障碍访问性，应谨慎使用。

3. 多环境测试的必要性：问题在不同硬件配置上的不一致表现，凸显了跨设备测试的重要性。

对于使用jQuery UI SelectMenu组件的项目，建议开发者确保用户使用的Chrome版本不低于124.0.6367.91，以获得最佳兼容性和稳定性。