Bootstrap 性能不佳 - 自定义-select resp select.form-控件冻结几秒钟

Question

我使用 bootstrap 4.6，我有一个自定义的 select 有 10-20 个选项

 <select class="custom-select">
     <option disabled="" selected=""></option>
     <option value="1">a</option>
     ...
 </select>

查看演示：https://codepen.io/Lieroo/project/editor/XwPeNz#

当我打开和关闭 select 时，浏览器会冻结几秒钟。

当我删除 'custom-select' select 或者，它不会冻结。
仅当页面上有使用 display: grid 的数据 table 时才会冻结，尽管自定义 select 在网格元素之外。

chromium edge 中的性能记录显示

这是怎么回事？这是 chromium 或 bootstrap?

中的错误

Answer 1

这是基于 Chromium 的浏览器中 Windows 与辅助功能相关的已知错误。

https://bugs.chromium.org/p/chromium/issues/detail?id=1187638

将在Chrome90+;

修复

在那之前你可以运行你的带有 -disable-renderer-accessibility 标志的 chromium 浏览器，例如

"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --profile-directory=Default --disable-renderer-accessibility

Answer 2

这是一个与 Chrome 89.

中的可访问性相关的问题

您可以在您的网站或应用的 CSS 中包含以下代码来解决它。它将删除 bootstrap 转换。如果您实际上是在向其他人提供服务并且您不能告诉他们在打开浏览器时包含特殊参数，我认为这比另一个答案中建议的解决方案更好。

select {

-webkit-transition: none !important;

-moz-transition: none !important;

-o-transition: none !important;

transition: none !important;

}

option {

-webkit-transition: none !important;

-moz-transition: none !important;

-o-transition: none !important;

transition: none !important;

}

Bootstrap 性能不佳 - 自定义-select resp select.form-控件冻结几秒钟

Bootstrap poor performance - custom-select resp select.form-control freezes for couple of seconds

css

twitter-bootstrap

performance

chromium