Preline项目中Advanced Select组件在Chrome浏览器中的关闭问题分析

问题背景

Preline UI框架中的Advanced Select组件在Chrome 127.0.X版本中出现了一个严重的交互问题：下拉菜单在打开后无法正常关闭。这个问题最初由用户oliverhaas在2024年7月26日报告，随后得到了多位用户的确认。

问题现象

当用户在Chrome 127.0.6533.72/73版本中：

1. 打开Advanced Select下拉菜单
2. 尝试通过点击外部区域或选择按钮关闭下拉菜单时
3. 下拉菜单会保持打开状态，并出现轻微的位置偏移（margin变化）

技术分析

经过深入调查，发现问题根源在于Chrome 127.0.X版本对CSS transition属性的返回值格式进行了变更：

1. 在Chrome 126及更早版本中，window.getComputedStyle(el).getPropertyValue('transition')返回值为"all 0s ease 0s"
2. 在Chrome 127.0.X版本中，该值简化为"all"，这与Firefox浏览器的行为一致

Preline框架中的afterTransition()函数原本依赖于特定的返回值格式来判断是否存在过渡效果：

const hasTransition = 
    window.getComputedStyle(el, null).getPropertyValue('transition') !==
    (navigator.userAgent.includes('Firefox') ? 'all' : 'all 0s ease 0s');

由于Chrome的变更，导致条件判断失效，进而影响了组件的关闭逻辑。

解决方案

Preline团队迅速响应，在2.4.1版本中发布了修复方案。更健壮的解决方案应该是：

1. 直接检查transition-duration和transition-delay的数值：

const duration = parseFloat(window.getComputedStyle(t).getPropertyValue("transition-duration")) || 0;
const delay = parseFloat(window.getComputedStyle(t).getPropertyValue("transition-delay")) || 0;
const hasTransition = (delay + duration) > 0;

2. 或者考虑使用setTimeout替代transitionend事件监听，因为后者在不同浏览器中的实现可能存在差异

影响范围

该问题影响所有基于Chromium 127.0.X的浏览器，包括：

• Google Chrome 127.0.X
• Microsoft Edge 127.0.X
• 其他基于Chromium的浏览器

Firefox和Chromium 126.0.X版本不受影响。

最佳实践建议

1. 对于CSS过渡效果的检测，建议直接检查duration和delay值而非transition属性
2. 在浏览器兼容性处理中，避免对特定格式的返回值做硬编码比较
3. 考虑添加降级方案，如setTimeout作为transitionend的备选方案
4. 保持UI框架的及时更新，以获取最新的兼容性修复

总结

浏览器引擎的细微变更可能导致前端组件出现意外行为。Preline团队对此问题的快速响应展示了开源社区的高效协作。开发者应当关注浏览器更新日志，并对可能影响现有功能的变更保持警惕。对于类似的下拉菜单组件，建议实现更健壮的关闭机制，如：

• 点击外部区域关闭
• ESC键关闭
• 滚动时自动关闭 等多重关闭策略，以提升用户体验的可靠性。