Class-toggling CSS animations not switching frames correctly in Chrome

Question

I wrote an HTML5/CSS3 remake of the Flash game, Chat Noir, about 3 years ago on my iPod Touch using the text editor in iFile (so sorry for the short names and messy code). The game can be found here:

http://geckojsc.com/misc/iChatNoir/

In the last few months I noticed that the animations (made with a CSS sprite) no longer work as intended in Chrome (it works fine in other modern browsers).

Because the game is played on a hexagonal grid, there are three directions in the sprite sheet: diagonally down, diagonally up, and sideways (hence the selectors for classes D, U and S). The DJ, UJ and SJ classes are the same, but show the cat mid-jump. Class L means the cat is pointing left, and class R means the cat is pointing right (the image is flipped).

.D {background-position:0px 0px;}
.U {background-position:-50px 0px;}
.S {background-position:-98px 0px;}
.DJ {background-position:0px -50px;}
.UJ {background-position:-50px -50px;}
.SJ {background-position:-98px -50px;}
.L {
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
}
.R {
    -webkit-transform: scale(-1,1);
    -moz-transform: scale(-1,1);
    -o-transform: scale(-1,1);
}

The javascript which animates these frames is as follows (cat is a div element):

if (catY%2) {
    if (catX<aim.x) catDir="R";
    else catDir="L";
} else {
    if (catX<=aim.x) catDir="R";
    else catDir="L";
}
if (aim.y>catY) catDir+=" D";
else if (aim.y<catY) catDir+=" U";
else catDir+= " S";

catX=aim.x; catY=aim.y;
updateCat();   // makes cat.className = catDir

// make the cat jump, then return to standing after 140 ms:
cat.className += "J";
setTimeout(function() {
    cat.className = cat.className.slice(0,-1);
},140);

In Chrome, the cat goes to his 'jumping' frame but does not return to the standing frame afterwards. I examined cat.className while the program was running, and it did change correctly, for example L DJ to L D, in all my test browsers, however the cat would remain displaying the L DJ graphics even though the className was L D.

This seems to be some sort of rendering problem. If I change the page zoom level, or switch to another tab then switch back or do any other action which redraws the page, the cat displays the correct frame. Hope there's some way I can fix this!

Answer 1

I managed to fix the problem by adding a small invisible border and instantly removing it, like so:

function forceRedraw(e) {
    e.style.border = 'solid 1px transparent';
    setTimeout(function() {
        e.style.border = 'solid 0px transparent';
    }, 0);
}

(from Force DOM redraw/refresh on Chrome/Mac)

Setting the display style to 'none' then reverting it to 'block' after 0ms also worked, however it could cause the element to flicker slightly, which is why I settled for this solution.