I have some trivial JavaScript to effect a style change:
sel = document.getElementById(\'my_id\');
sel.className = sel.className.replace(/item-[1-9]-selected
For some reason I couldn't get danorton's answer to work, I could see what it was supposed to do so I tweaked it a little bit to this:
$('#foo').css('display', 'none').height();
$('#foo').css('display', 'block');
and it worked for me.
I use the transform: translateZ(0);
method but in some cases it is not sufficient.
I'm not fan of adding and removing a class so i tried to find way to solve this and ended up with a new hack that works well :
@keyframes redraw{
0% {opacity: 1;}
100% {opacity: .99;}
}
// ios redraw fix
animation: redraw 1s linear infinite;
Since the display + offset trigger didn't work for me, I found a solution here:
http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/
i.e.
element.style.webkitTransform = 'scale(1)';
I cannot believe this is still a problem in 2014. I just had this issue when refreshing a fixed position caption box on the lower-left hand of the page while scrolling, the caption would 'ghost' its way up the screen. After trying everything above without success, I noticed a lot of things were either slow/causing issues due to creating very short DOM relayouts etc causing somewhat unnatural feeling scrolling etc...
I ended up making a fixed position, full-size div with pointer-events: none
and applying danorton's answer to that element, which seems to force a redraw on the whole screen without interfering with the DOM.
HTML:
<div id="redraw-fix"></div>
CSS:
div#redraw-fix {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 25;
pointer-events: none;
display: block;
}
JS:
sel = document.getElementById('redraw-fix');
sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';
The following works. It only has to be set once in pure CSS. And it works more reliably than a JS function. Performance seems unaffected.
@-webkit-keyframes androidBugfix {from { padding: 0; } to { padding: 0; }}
body { -webkit-animation: androidBugfix infinite 1s; }
A simple solution with jquery:
$el.html($el.html());
or
element.innerHTML = element.innerHTML;
Had an SVG that wasn't showing when it was added to the html.
This can be added after the svg elements are on the screen.
Better solution is to use:
document.createElementNS('http://www.w3.org/2000/svg', 'svg');
and with jQuery:
$(svgDiv).append($(document.createElementNS('http://www.w3.org/2000/svg', 'g'));
this will render correctly on Chrome.