2

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?

mattsven
  • 22,305
  • 11
  • 68
  • 104

1 Answers1

4

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

chris
  • 111
  • 4
  • Excellent answer! For other people it might be worth it to explain the event queue/execution order part. Thanks. – mattsven Jun 19 '13 at 12:46
  • Just saw the update. I don't think any mutation events respond to repaints/redraws? – mattsven Jun 20 '13 at 17:12
  • @mattcurtis Yes, it is correct that the MutationObserver does not respond to repaints! Only to DOM manipulation like node added, and so. The question states that there is manipulation of the style. Now the interesting part is, if the MutationObserver is triggered before or after the paint? – chris Jul 04 '13 at 14:09