How to Force Webkit to Redraw/Repaint to Propagate Style Changes

How can I force WebKit to redraw/repaint to propagate style changes?

I found some complicated suggestions and many simple ones that didn’t work, but a comment to one of them by Vasil Dinkov provided a simple solution to force a redraw/repaint that works just fine:

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

I’ll let someone else comment if it works for styles other than “block”.

Thanks, Vasil!

How can I force WebKit to redraw/repaint to propagate style changes?

I found some complicated suggestions and many simple ones that didn’t work, but a comment to one of them by Vasil Dinkov provided a simple solution to force a redraw/repaint that works just fine:

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

I’ll let someone else comment if it works for styles other than “block”.

Thanks, Vasil!

Synchronous redraw in Webkit/Wait for DOM update?

It is always like -> Code -> Layout -> Paint

If some of your code is based on paint result, you have to shift it. The paint work of the browser is not part of a synchronous workflow, so you need second code block for the event queue.

Solution 1:

window.setTimeout(snapShotPage, 0);

Solution 2:

Use the requestAnimationFrame and call the snapShotPage function at the next frame.

Solution 3:

React on a DOM event and call the snapShotPage change event via MutationObserver

How to force webkit to update SVG use elements after changes to original

After some experimentation I created a hack that works. After updating the SVG I call the following function to force a redraw:

function repaint() {
    var svg_doc = svg_el.contentDocument; // get the inner DOM of SVG
    svg_doc.rootElement.innerHTML += ''; // "update" the inner source
}

It's possibly worth noting that you can't use the outerHTML of the root element. It is read-only because its parent (the SVG document) is not an "element".

CSS Webkit Bug - Redraw Issue?

Not sure if it's technically a bug, but it definitely is strange behavior. You can work around it by by changing this section:

#header_lower  ul li a{
box-sizing: border-box;
-ms-box-sizing: border-box; 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

...to use content-box instead of border-box. Unless your layout is heavily dependent on thick borders around those elements and you can't compensate for it, that might be the way to go.

IE10 Repaint/Redraw issue

While I have no solid answer for the reason behind this redraw issue, I found that an instantaneous jQuery hide/show redrew the element completely without any visible side effects.

Using a non-jQuery JS hack to add a class to the HTML element in IE10 (see Willem de Wit's answer to this quandry), I made sure this code only fired on IE10.

if($('html').hasClass('ie10')) {
  $('.primary').hide(0, function(){$(this).show()});
}

---

Related Topics