react-transition-group icon indicating copy to clipboard operation
react-transition-group copied to clipboard

Perf: Use getComputedStyle( node ).opacity instead of node.scrollTop to force repaint

Open rejhgadellaa opened this issue 2 years ago • 1 comments

The forceReflow() function in src/utils/reflow.js currently reads node.scrollTop to force a reflow. That causes style, layout, paint and composite to be run (and makes sure the browser picks up on style changes that need a transition), but there is a shortcut that only causes style recalculation without doing layout and paint (at least not until the next frame is requested:

getComputedStyle( node ).opacity

It would also help if the style of the (container) element is contained (e.g., something like contain: content;) so the browser can optimize which part of the style needs to recalculate). I guess that depends on the use-case but may be worth mentioning in the docs?

See this blog post (or skip straight to relevant code snippet)

rejhgadellaa avatar Sep 03 '23 08:09 rejhgadellaa

If it's true, we need a PR for this

constgen avatar Nov 19 '24 16:11 constgen