Executing getBoundingClientRect() method raises performance delay in bootstrap 5.3.2
Nobody has claimed this yet.
- Dominant language
- MDX
- Stars
- 175k
- Forks
- 78.6k
- Avg merge
- 7h 19m
- Merged PRs (30d)
- 35
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
Hi,
I am using Bootstrap 5.3.2 in my application.
Initially, I have a table, and I dynamically create and remove another table through a button click to calculate some values. For that, I have used the getBoundingClientRect() method.
This functionality worked fine in the previous version (4.6.2). However, with the 5.3.2 version, it is causing a performance delay.
<!-- working style sheet -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<!-- issue style sheet -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
Reduced test cases
Issue sample: https://stackblitz.com/edit/fvhzg3-9vnksx?file=index.html,index.js
Replication procedure:
Click the button and observe the console, which displays the time taken for the process.
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v5.3.2
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz reproduction, especially index.html and index.js, and run its button action in Chrome while comparing Bootstrap 4.6.2 with 5.3.2. The report names no repository file or test, so first isolate the performance difference around getBoundingClientRect() and the dynamically created and removed table. Done means the delay is reproducible and its Bootstrap-related cause is identified with a regression check or narrowly defined fix.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- bootstrap, css, html, javascript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100