How to Reliably Force a DOM Redraw in Chrome on macOS?

Force DOM Redraw on Chrome/Mac: A Solution to Rendering Issues

In certain situations, Chrome on Mac can fail to render HTML/CSS correctly, despite the markup's validity. A common solution involves modifying a CSS property and retrieving the offsetHeight to force a redraw. However, this method no longer works efficiently in Chrome/Mac.

To address this issue, an alternative approach that does work on Chrome/Mac involves temporarily changing the border of the problematic element:

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

This forces the element to reposition, ensuring a redraw. However, a drawback is the delay involved, which can be visually distracting.

An even more reliable method is to insert an empty text node into the element:

var forceRedraw = function(element){
    if (!element) { return; }
    var n = document.createTextNode(' ');
    var disp = element.style.display;
    element.appendChild(n);
    element.style.display = 'none';
    setTimeout(function(){
        element.style.display = disp;
        n.parentNode.removeChild(n);
    },20);
}

This technique guarantees a redraw without the need for a visual jump. By modifying the display property and inserting a text node, it trigger the DOM to reflow and accurately display the element.

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