Synchronous Redraw In Webkit/Wait For DOM Update?

I'm manipulating the transform property like so in my webpage in order to achieve a scrolling effect: element.style.webkitTransform = 'translate(0px, -'+scrollY+'px)'; snapShotPage

Solution 1:

It is always like -> Code -> Layout -> Paint

If some of your code is based on paint result, you have to shift it. The paint work of the browser is not part of a synchronous workflow, so you need second code block for the event queue.

Solution 1:

window.setTimeout(snapShotPage, 0);

Solution 2:

Use the requestAnimationFrame and call the snapShotPage function at the next frame.

Solution 3:

React on a DOM event and call the snapShotPage change event via MutationObserver