How to Force a DOM Redraw on Chrome/Mac?

Forceful DOM Redraw on Chrome/Mac

When encountering rendering issues with Chrome on Mac, traditional methods of triggering a redraw fail due to optimizations implemented in the browser. This article explores an alternative approach that leverages the parent element's visibility manipulation to force a redraw without relying on the offsetHeight property.

Common Hack for Redraw

In other browser combinations, the following hack effectively triggers a redraw:

el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
el.offsetHeight
el.style.cssText += ';-webkit-transform:none'

By modifying an unused CSS property, then requesting information that forces a recalculation (like the element's height), and finally restoring the original property, a redraw is achieved.

Chrome/Mac Optimization

Unfortunately, Chrome on Mac circumvents this hack by retrieving the offsetHeight without triggering a redraw.

Alternative Redraw Hack

To force a redraw on Chrome/Mac, the following solution is proposed:

$(el).css("border", "solid 1px transparent");
setTimeout(function()
    {
        $(el).css("border", "solid 0px transparent");
    }, 1000);

This method introduces a visible change to the element's border, which forces the browser to redraw. A timeout is necessary to ensure that the redraw occurs before the border returns to its original state.

Additional Options

Other methods to force a redraw include:

• Hiding and then unhiding the parent element using jQuery:

$('#parentOfElementToBeRedrawn').hide().show(0);

• Inserting an empty text node into the element:

var forceRedraw = function(element) {
    ...
}

These methods ensure a more direct redraw without involving CSS manipulation.

The above is the detailed content of How to Force a DOM Redraw on Chrome/Mac?. For more information, please follow other related articles on the PHP Chinese website!