How to Force a DOM Redraw in Chrome on Mac?

Force DOM Redraw on Chrome/Mac

Problem:
In Chrome for Mac, forcing a redraw using the common offsetHeight trick does not work.

Current Hack:
A workaround involves adding and removing a border to force the element to visually jump. However, it introduces a noticeable delay and may not be effective at lower timeouts.

Proposed Solution:
An alternative approach that has proven successful is:

// in jQuery
$('#parentOfElementToBeRedrawn').hide().show(0);

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

Improved Solution:
For a more guaranteed redraw, the following method inserts 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); // Adjust timeout as needed
};

This approach ensures a complete DOM redraw, potentially addressing the issue of incorrect rendering in Chrome for Mac.

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