javascript - html5キャンバスを連続的に移動するPhonegap

Question

HTML5 キャンバスを使用して JavaScript で自転車レース ゲームを作成しています。ゲームは 3 つのキャンバスで構成されています。1 つは背景用、もう 1 つはレベル用、もう 1 つは自転車用の小さな移動キャンバス (Y 軸で上下に移動するだけ) です。

この第 3 のキャンバスは、バイクの位置に応じて常に動いています。自転車のキャンバスを急激に動かさないようにするために、自転車がかなりの距離を移動したときにのみ移動します。

if(newBikePos - oldBikePos > 20 || newBikePos - oldBikePos < -20) {
    newBikePos = ((chassis.body.getPos().y + leftWheel.body.getPos().y +
        rightWheel.body.getPos().y)/3 - 150); // Roughly the position of the bike

    gameCanvas.style.top = newBikePos * SCALE; // This is how I move the canvas
}

gameContext.clearRect(0, 0, gameCanvas.width, gameCanvas.height);

// Drawing the bike(chassis, leftwheel and rightwheel) onto the bike canvas

これを Mac で実行すると正常に動作しますが (chrome、firefox、safari)、Phonegap を使用して Nexus 4 で実行すると、キャンバスが適切にクリアされません。キャンバスが移動するたびに、自転車は新しく配置されたキャンバスでスムーズに移動しますが、キャンバスが移動する前の最後のフレームからの自転車の「静止画」も表示されます。この「静止画」は、キャンバスの位置が再び変わると消えますが、説明に従って新しい静止画が作成されます。

毎秒 60 フレームでキャンバスを更新しても、「静止画像」は表示されますが、それほど目立ちません。

Phonegap を使用してこの問題に遭遇した人はいますか? それを修正する方法についてのアイデアはありますか？