Home >Web Front-end >CSS Tutorial >How to Force a DOM Redraw/Refresh in Chrome for Mac?
Force DOM Redraw/Refresh in Chrome for Mac
When Chrome for Mac encounters valid HTML/CSS, it sometimes renders the elements incorrectly or not at all. While inspecting the DOM in the browser console usually triggers a redraw, a more automated solution is desirable.
The following JS snippet works effectively in most browsers and operating systems:
el.style.cssText += ';-webkit-transform:rotateZ(0deg)' el.offsetHeight el.style.cssText += ';-webkit-transform:none'
However, Chrome for Mac bypasses the redraw triggered by offsetHeight. A workaround is to use setTimeout to temporarily change the border of the element, forcing a redraw:
$(el).css("border", "solid 1px transparent"); setTimeout(function() { $(el).css("border", "solid 0px transparent"); }, 1000);
This approach is cumbersome and noticeable. A more efficient method for forcing a redraw on Chrome for Mac 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; // 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 approach guarantees a redraw and is more efficient than the border method.
The above is the detailed content of How to Force a DOM Redraw/Refresh in Chrome for Mac?. For more information, please follow other related articles on the PHP Chinese website!