Bootstrap 4.6 custom-select与含display:grid的表格共存时操作下拉框浏览器冻结问题排查

页面实现 #

基于Bootstrap 4.6开发的页面中，存在一个挂载custom-select类的下拉选择框，选项规模为10-20个，核心代码结构如下：

<select class="custom-select">
  <option disabled selected></option>
  <option value="1">a</option>
  <!-- 其余10-19个业务选项 -->
</select>

异常表现 #

操作下拉框执行打开、关闭动作时，浏览器会出现数秒的冻结无响应，交互卡顿明显。

对照测试的已知规律 #

通过控制变量测试，已总结出明确的问题触发条件：

• 移除select元素上的custom-select类，使用浏览器原生下拉渲染样式后，冻结问题完全消失
• 问题仅当页面中存在使用display: grid布局的数据表格时才会触发；即便custom-select下拉元素不在该grid布局对应的DOM元素嵌套范围内，也可以稳定复现
• 该问题在Chromium内核的Edge浏览器中可稳定复现，已通过浏览器性能分析工具采集到对应的运行性能记录

待确认的核心问题 #

需要定位卡顿冻结的根本成因：

• 问题属于Chromium内核的渲染逻辑Bug
• 问题是Bootstrap框架的样式实现逻辑引发的渲染性能问题

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