I have some trivial JavaScript to effect a style change:
sel = document.getElementById(\'my_id\');
sel.className = sel.className.replace(/item-[1-9]-selected
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!
I found that just adding a content style to the element forced it to repaint, this should be a different value every time you want it to redraw and doesn't need to be on a pseudo element.
.selector {
content: '1'
}
I am working on ionic html5 app, on few screens i have absolute
positioned element, when scroll up or down in IOS devices (iPhone 4,5,6, 6+)i had repaint bug.
Tried many solution none of them was working except this one solve my problem.
I have use css class .fixRepaint
on those absolute positions elements
.fixRepaint{
transform: translateZ(0);
}
This has fixed my problem, it may be help some one
This will force repaint while avoid flickering, existing element tinkering and any layout issue...
function forceRepaint() {
requestAnimationFrame(()=>{
const e=document.createElement('DIV');
e.style='position:fixed;top:0;left:0;bottom:0;right:0;background:#80808001;\
pointer-events:none;z-index:9999999';
document.body.appendChild(e);
requestAnimationFrame(()=>e.remove());
});
}
I would recommend a less hackish and more formal way to force a reflow: use forceDOMReflowJS. In your case, your code would look as follows.
sel = document.getElementById('my_id');
forceReflowJS( sel );
return false;
I stumbled upon this today: Element.redraw() for prototype.js
Using:
Element.addMethods({
redraw: function(element){
element = $(element);
var n = document.createTextNode(' ');
element.appendChild(n);
(function(){n.parentNode.removeChild(n)}).defer();
return element;
}
});
However, I've noticed sometimes that you must call redraw() on the problematic element directly. Sometimes redrawing the parent element won't solve the problem the child is experiencing.
Good article about the way browsers render elements: Rendering: repaint, reflow/relayout, restyle