Firefox, prevent rendering between javascript statements.

Question

I'm trying to create some kind of zoom around the mouse cursor feature on my website which ultimately runs these two lines (+ the same for height/scrollTop).

canvas.style.width = someValue;
canvas.parentNode.scrollLeft = someOtherValue;

The problem is that in firefox(3.6) the page is re-rendered directly after the first row has been executed and since the view is depending on both values this means that every time i recalculate the view firefox will will render an invalid view before the correct one, in other words creating flicker.

I've tried swapping the two rows but get the same problem.

In chrome, opera and IE this doesn't happen. Both lines are executed before any rendering is done.

Is there any way to lock the rendering manually, maybe something like this?

document.disableRendering();        //fantasy function
canvas.style.width = someValue;
canvas.parentNode.scrollLeft = someOtherValue;
document.enableRendering();         //fantasy function

Answer 1

A common way to avoid this is to set .display = 'none'; while doing the DOM manipulation.