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

[rejhgadellaa]

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)