How can I trigger CSS layout recalculation after Javascript DOM updates?

Question

I often find that if I create or reparent DOM nodes in javascript, the CSS engine doesn't recalculate the sizes of the parent containers. This happens in Firefox and Chrome.

For example, the body might stay the same size while new content overflows the bottom. If I resize the window the body grows, but it doesn't "lock in" to its correct size until the window is sized to be at least as big as the body should be.

Is there a way to trigger a full layout recomputation in Javascript?

Answer 1

I can able to trigger CSS Engine via:

document.body.style.zoom = 1.0000001;
setTimeout(function(){document.body.style.zoom = 1;},50); //allow some time to flush the css buffer.

For every time after resizing the window use the following:

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});
$(window).bind('resizeEnd', function() {
    document.body.style.zoom = 1.0000001;
    setTimeout(function(){document.body.style.zoom = 1;},50);
});