javascript - SpriteSheets、CSS、HTML5、および Safari - パフォーマンスが低下する理由

Question

http://kazopark.com/3d/car/

このアニメーションはスプライトシートを使用しています。

このアニメーションは、Firefox と Chrome、および最新バージョンの IE で完全に正常に動作します。

ただし、Safariに関しては、期待どおりに機能していません. アニメーションの速度は非常に遅く、15 FPS まで落ちます。

意図的に他のブラウザを遅くすることなく、このようなものをすべてのブラウザで同じように動作させる方法はありますか?

これは、Safari が大きな画像を処理する不適切な方法に関係しているのではないでしょうか?

このために、ファイルサイズを 4.3mb から 1.8mb にまで縮小したことに注意してください。それはまだ正しく再生されていません。

アニメーションのコード:

/********************************
*         INIT ON LOAD          *
*            PUBLIC             *
*********************************/
KMS.background = function(){
var singleton = {};

this.parent;
this.imgHolder;
this.newWidth;
this.newHeight;

function init(){
    parent = document.createElement('div');
    parent.className = "KMS_div";
    parent.id = "KMS_div_Background";

    var holder = document.getElementById("KMS_div_Holder");
    holder.appendChild(parent);

    imgHolder = new Image();
    imgHolder.id = "KMS_img_SpriteSheet";
    imgHolder.src = "img/CarRoad_low2.jpg";
    parent.appendChild(imgHolder);

    newWidth = window.innerWidth / 800;
    newHeight = window.innerHeight / 600;

    imgHolder.style.width = 512 + "%";
    imgHolder.style.height = 1365.4 + "%";
}


function BeginBackground(){
    init();

    var i = 0;

    setInterval(function(){
        parent.style.left = -(100 * (i % 5)) + "%";
        parent.style.top = -(100 * (parseInt(i / 5) % 14)) + "%";
        i++;

        if(i === 63)    i = 0;

        console.log(i);

    }, 50);

    console.log("BG begin");
};

singleton.BeginBackground = BeginBackground;

return singleton;
}();