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 was suffering the same issue. danorton's 'toggling display' fix did work for me when added to the step function of my animation but I was concerned about performance and I looked for other options.
In my circumstance the element which wasn't repainting was within an absolutely position element which did not, at the time, have a z-index. Adding a z-index to this element changed the behaviour of Chrome and repaints happened as expected -> animations became smooth.
I doubt that this is a panacea, I imagine it depends why Chrome has chosen not to redraw the element but I'm posting this specific solution here in the help it hopes someone.
Cheers, Rob
tl;dr >> Try adding a z-index to the element or a parent thereof.
Not that this question needs another answer, but I found simply changing the color by a single bit forced a repaint in my particular situation.
//Assuming black is the starting color, we tweak it by a single bit
elem.style.color = '#000001';
//Change back to black
setTimeout(function() {
elem.style.color = '#000000';
}, 0);
The setTimeout
proved critical to move the second style change outside the current event loop.
I've found this method to be useful when working with transitions
$element[0].style.display = 'table';
$element[0].offsetWidth; // force reflow
$element.one($.support.transition.end, function () {
$element[0].style.display = 'block';
});