1

私は約 3 年前に iPod Touch で iFile のテキスト エディタを使用して、Flash ゲーム Chat Noir の HTML5/CSS3 リメイクを書きました (短い名前と乱雑なコードで申し訳ありません)。ゲームはここで見つけることができます：

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

ここ数か月で、アニメーション (CSS スプライトで作成) が Chrome で意図したとおりに動作しないことに気付きました (他の最新のブラウザーでは正常に動作します)。

ゲームは六角形のグリッドでプレイされるため、スプライト シートには、斜め下、斜め上、横の 3 つの方向があります (したがって、クラス 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プログラムの実行中に調べたところ、たとえばすべてのテスト ブラウザーで に正しく変更されましたが、className が.L DJL DL 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から)

表示スタイルを「なし」に設定し、0ms 後に「ブロック」に戻すこともできましたが、要素がちらつく可能性があるため、この解決策に落ち着きました。

于 2013-03-23T16:32:05.253 に答える