Search code examples
csstwitter-bootstrapperformancechromium

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

I use bootstrap 4.6 and I have a custom select with 10-20 options

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

See demo: https://codepen.io/Lieroo/project/editor/XwPeNz#

When I open and close the select, the browser freezes for couple of seconds.

screenrecording

  1. When I remove 'custom-select' selector, it wont freeze.
  2. It freezes only when there is a data table that uses display: grid on the page, although the custom-select is outside the grid's element.

The performance recording in chromium edge shows

What's going on? it is a bug in chromium, or on bootstrap?

enter image description here

Solution

  • This is a known bug in Chromium based browsers on Windows related to Accessibility.

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

    It will be fixed in Chrome 90+;

    Until then you can run your chromium browser with -disable-renderer-accessibility flag, e.g

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