How to Force a DOM Redraw in Chrome on macOS?

Force DOM Redraw on Chrome/Mac

This issue arises when Chrome on Mac devices incorrectly renders valid HTML/CSS elements. While inspecting the DOM often triggers a correct redraw, this hack fails on Chrome/Mac due to optimizations that prevent offsetHeight from triggering a redraw.

The following hack is a workaround:

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

This forces the element to slightly jump, which triggers a redraw. However, the delay is noticeable.

An alternative is to use this method instead:

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

// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

This hides and then shows the parent element, forcing a redraw.

If this method fails, the following function guarantees a redraw by inserting an empty text node into the element:

var forceRedraw = function(element){

    if (!element) { return; }

    var n = document.createTextNode(' ');
    var disp = element.style.display;  // don't worry about previous display style

    element.appendChild(n);
    element.style.display = 'none';

    setTimeout(function(){
        element.style.display = disp;
        n.parentNode.removeChild(n);
    },20); // you can play with this timeout to make it as short as possible
}

This technique essentially forces a reflow, updating the layout and triggering a redraw.

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