Javascript SpriteSheets、CSS、HTML5和Safari——为什么性能会出现问题？

此动画正在使用精灵表

该动画在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;
}();

---

我没有从那个url（Windows8 64位，IE11）中看到任何东西，我还没有在IE上测试过。我一直在关注狩猎问题。我怀疑“holder.appendChild（parent）；”不适用于IE。为了便于查看，我会看看是否可以修复它。@dav1dsm1th好的，修复了。现在试试？这是一种非常奇怪的制作动画的方法，你应该使用css和

背景位置
属性，因为它可能更适合这种事情。不。还是没什么。我只是试着回答你的问题，它将与最新的IE。。。也许把它从你的文本中删除，直到你开始工作。祝你好运