1

大约 3 年前，我在我的 iPod Touch 上使用 iFile 中的文本编辑器编写了 Flash 游戏 Chat Noir 的 HTML5/CSS3 重制版（对于短名称和混乱的代码，我深表歉意）。游戏可以在这里找到：

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

在过去的几个月里，我注意到动画（用 CSS 精灵制作）在 Chrome 中不再像预期的那样工作（在其他现代浏览器中也能正常工作）。

因为游戏是在六边形网格上进行的，所以 sprite 表中有三个方向：对角向下、对角向上和侧向（因此有 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，但是即使 className 为L D，猫仍会显示图形。L DJL D

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

4

1 回答 1

0

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

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

（来自Chrome/Mac 上的 Force DOM redraw/refresh）

将显示样式设置为“无”，然后在 0 毫秒后将其恢复为“阻塞”也可以，但是它可能会导致元素轻微闪烁，这就是我选择此解决方案的原因。

于 2013-03-23T16:32:05.253 回答