2

When you make changes to the DOM, these are put into the event queue and executed accordingly. However, as far as I know, the actual redraw event that this DOM modification triggers happens dynamically and is then put last in the existing queue, whatever that may already contain.

Is there a way to explicitly request the browser to do a redraw, putting it in the event queue in the same orderly fashion as all the other statements?

This is not a XY question, I know that I can use setTimeout to leave the queue temporarily empty in order to let the redraw be executed first. And since that is a common strategy, I realize that the answer to my question probably is no, but I'd rather not jump to conclusions.

Alex
  • 14,104
  • 11
  • 54
  • 77
  • Does this question help: http://stackoverflow.com/questions/8840580/force-dom-redraw-refresh-on-chrome-mac ? – Taha Paksu Dec 12 '16 at 08:54
  • And maybe hiding and showing the or tags for an instant may trigger the redraw. Just maybe. – Taha Paksu Dec 12 '16 at 08:55
  • @TahaPaksu That question and its answers looks to be concerned with simply triggering a redraw to fix rendering glitches, I cant find anything that would affect how the queue gets populated. – Alex Dec 12 '16 at 09:20

1 Answers1

0

If I understand your question correctly the issue is that you need to have applied one DOM manipulation before another begins, because the later relies on the what happens in the former. This is classic in transitions & animations, for instance.

One way is to ask the browser for information on the actual client display properties of the DOM object that you're about to modify. This will cause it to first apply any pending DOM changes, and then report back the information you requested. For instance:

var div = document.getElementById('div-to-animate');
div.style.transition = 'transform 5s linear';

// Here's the magic -- we need our transition rule to be applied
// before the transform rule below, or else our div will immediately
// jump left, so we ask for its client rectangle:
var rect = div.getBoundingClientRect();

// Now we can animate it safely:
div.style.transform = 'translate(-100px, 0)';

Hope this helps!

gristow
  • 45
  • 2
  • 7