Question

我使用iFile中的文本编辑器在我的iPod Touch上写了大约3年前Flash游戏Chat Noir的HTML5 / CSS3翻版（很抱歉短名称和杂乱的代码）。游戏可以在这里找到：

在过去的几个月里，我注意到动画（使用CSS精灵制作）不再像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到L D，但是猫会即使className为L DJ，也会继续显示L D图片。

这似乎是某种渲染问题。如果我更改页面缩放级别，或切换到另一个选项卡然后切换回或执行任何其他重绘页面的操作，则cat会显示正确的帧。希望我有办法解决这个问题！

Answer 1

我设法通过添加一个小的不可见边框并立即删除它来解决问题，如下所示：

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

（来自Force DOM redraw/refresh on Chrome/Mac）

将显示样式设置为'none'，然后在0ms之后将其恢复为'block'，但是它可能会导致元素略微闪烁，这就是为什么我选择了这个解决方案。

类切换CSS动画不能在Chrome中正确切换帧

1 个答案: