CODEWITHSUNDEEP
javascripthtmlcsswebkitmobile-safari
mattsven
mattsven

Reputation: 23293

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();

I know that in most browsers (including Webkit from my experience) wait until script execution is over to make any visual changes, however in my case, I need snapShotPage() to run after redraw/repaint has occurred, in order to get an accurate snapshot. Is there any way to do this?

I noticed that using scrollTop causes this behavior, however it's not an option in my case. Is there a solution that avoids using setTimeout?

Upvotes: 2

Views: 1245

Answers (1)

chris
chris

Reputation: 111

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

Upvotes: 4

Related Questions