[Bug]: getScrollParent is triggering forced reflow, impacting boot performance #25326
Description
Library
React Components / v9 (@fluentui/react-components)
System Info
N/A (Using CodeSandbox)
@fluentui/react-components v9.5.2Are you reporting Accessibility issue?
no
Reproduction
https://codesandbox.io/s/tooltip-and-computed-style-b9wvlh?file=/example.tsx
Bug Description
After wrapping components in <Tooltip>, we observe significant time consumed by getScrollParent function.
Especially, the window.getComputedStyle invocation in getStyleComputedProperty may force a style re-evaluation in some cases, causing performance issue.
Below is the flamechart of the example provided, when rendering 10 buttons with tooltips. (The time numbers may exaggerate as I've enabled 6x CPU slowdown to retrieve the complete stack track)
The example I've provided with this issue represents a typical scenario where such performance issue has been observed:
- User opens our web app.
- During web app initialization, we trigger a React component state change.
- By changing the component state,
- we change the styles of some parent
<div>or<body>elements. (this is important to reproduce such a perf issue) - we also adds some buttons with tooltips inside the
<div>element.
- we change the styles of some parent
And we observed some browser freeze when performing the React state update, and we see a large chunk of time taken in "Recalculate Style".
Please open the sample provided, uncheck "Render buttons with tooltips", click "Render buttons", and see console output. Then after refreshing the browser check "Render buttons with tooltips", click "Render buttons", and see console output.
Actual Behavior
"Render buttons with tooltips" unchecked
"Render buttons with tooltips" checked
Expected Behavior
I don't expect to see a 5ms -> 15ms change to render the Buttons, only because I've added Tooltips for them.
Logs
No response
Requested priority
Normal
Products/sites affected
No response
Are you willing to submit a PR to fix?
yes
Validations
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.