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?
The
forceReflow()function insrc/utils/reflow.jscurrently readsnode.scrollTopto 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: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)