How to Force a DOM Refresh in Chrome on Mac?

Force DOM Refresh on Chrome for Mac

Despite having valid HTML and CSS, Chrome on Mac occasionally fails to render elements correctly or neglects rendering them entirely. While inspecting the DOM through the inspector often resolves the issue, there are instances where Chrome intentionally avoids redrawing.

The common redraw/refresh hack that works for other browser-OS combinations involves modifying an unused CSS property, fetching some information to trigger a redraw, and then reverting the property change.

However, this method fails in Chrome for Mac. A more complex solution had to be employed:

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

This method causes the element to visibly jump, which forces a redraw. However, reducing the timeout below 500ms may result in the browser redrawing before the element reverts to its original state, nullifying the effect.

Alternative Redraw Methods

Another simple refresh method that may suffice is to hide and then immediately show the parent container of the element that needs redrawing.

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

// Plain JavaScript
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

For a more thorough redraw, an empty text node can be inserted and removed from 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 forces a reflow, as described by Paul Irish: http://paulirish.com/2011/dom-html5-css3-performance/

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