1

In my code, I have to remove a class, to get its full height. This is being done in requestAnimationFrame, but removing the class then querying scrollHeight will force a reflow. Do I simply need to query scrollHeight in setTimeout?

requestAnimationFrame(() => {
  poo.style.overflow = 'visible';
  poo.scrollHeight;
  // Do something with it
  poo.style.overflow = 'auto';
});

Into...?

requestAnimationFrame(() => {
  poo.style.overflow = 'visible';

  setTimeout(() => {
    poo.scrollHeight;
    // Do something with it
    poo.style.overflow = 'auto';
  }, 0);
});
user1164937
  • 1,979
  • 2
  • 21
  • 29
  • 1
    When you actually need the reflow, there's no reason to try to avoid it. Using `setTimeout` will at worst cause the element to flicker with the intermediate style. – Bergi Dec 09 '18 at 13:22
  • @Bergi Are you implying that within a single frame, there can be multiple reflows/repaints, but only a single render? Or multiple renders in succession to reduce the "flicker" as much as possible? – user1164937 Dec 09 '18 at 16:58
  • 1
    Yes, you can have multiple reflows before a single repaint. There would only be a single frame be painted. – Bergi Dec 09 '18 at 17:00
  • @Bergi I'm confused because I read somewhere that if you reflow, it will also cause the page to repaint. Maybe it's due to misunderstanding, but from what you described, there is no such thing as a "repaint". There is only a single "paint" or none at all in a frame. Mind clearing this up, please? – user1164937 Dec 10 '18 at 05:03
  • TBH, I'm not quite sure any more. It probably depends on the implementation whether every reflow also does a repaint - they might as well be completely independent. (However, there definitely are repaints without a reflow, e.g. when scrolling or drawing on a canvas). Good reads: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/, https://stackoverflow.com/q/2549296/1048572 – Bergi Dec 10 '18 at 09:03

0 Answers0