切換類的CSS動畫無法在Chrome中正確切換幀

Question

大約三年前，我使用iFile中的文本編輯器在iPod Touch上編寫了Flash游戲Chat Noir的HTML5 / CSS3重制版（對不起，短名稱和混亂的代碼）。 游戲可以在這里找到：

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

在過去的幾個月中，我注意到動畫（使用CSS Sprite制作）不再能在Chrome中正常工作（在其他現代瀏覽器中效果很好）。

因為游戲是在六角形網格上進行的，所以精靈表中存在三個方向：對角向下，對角向上和側向（因此，D，U和S類的選擇器）。 DJ，UJ和SJ類是相同的，但顯示了貓跳中。 L級表示貓指向左，R級表示貓指向右（圖像被翻轉）。

.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);
}

動畫化這些框架的javascript如下（cat是div元素）：

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);

在Chrome中，貓會轉到其“跳躍”幀，但此后不會返回到站立幀。 我在程序運行時檢查了cat.className ，並且確實在所有測試瀏覽器中將其正確更改，例如從L DJ更改為LD ，但是即使className是LD ，該貓也仍會顯示L DJ圖形。

這似乎是某種渲染問題。 如果我更改頁面縮放級別，或切換到另一個選項卡，然后再切換回去或執行任何其他重繪頁面的操作，則貓會顯示正確的框架。 希望有某種方法可以解決此問題！

Answer 1

我設法通過添加小的可見邊框並立即將其刪除來解決該問題，如下所示：

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

（來自Chrome / Mac上的Force DOM重繪/刷新 ）

將顯示樣式設置為“ none”，然后在0ms之后將其還原為“ block”也可以，但是這可能會導致元素輕微閃爍，這就是為什么我選擇這種解決方案的原因。