Performance Transform-translate在IE上的性能很差

我目前正在使用HTML和画布创建floormap

以下是测试url：

每个缩放级别的地图图像都被切块（使用PHP），并使用具有不同transform:translate（）位置的HTML div重建地图

在鼠标滚轮事件中，比例因子应用于每个div，一旦比例变为1，将显示下一个缩放级别

鼠标拖动时，将更新“平移”值

现在问题来了

在Chrome、Safari上一切都很好，但在IE上，拖拽动作确实有点滞后（在Firefox中也有点滞后）

以下是拖动时调用的“我的地图刷新”函数：

app.refresh_map = function() {

    var curr_map = app.maps[app.curr_zoom];
    var maxI = curr_map.tiles.length-1;
    var maxJ = curr_map.tiles[0].length-1;
    var scale = app.zooms[app.curr_zoom][app.curr_scale];

    for(var i=0; i<=maxI; i++) {     
        for(var j=0; j<=maxJ; j++) {

            var curr_tile = curr_map.tiles[i][j];

            var new_tile = {
                x: curr_tile.x*scale, y: curr_tile.y*scale,
                width: curr_tile.width, height: curr_tile.height
            };

            var selector = ".fm-tiles[data-map='"+app.mapID+"'] .fm-tile[data-zoom='"+app.curr_zoom+"'][data-tile='"+i+"-"+j+"']";
            if ( app.in_screen(new_tile) ) {

                if( $(selector).length==0 ) $tiles.append('<div class="fm-tile" data-zoom="'+app.curr_zoom+'" data-tile="'+i+"-"+j+'"></div>');
                var $tile = $(selector);

                var x = app.pos.x + new_tile.x;
                var y = app.pos.y + new_tile.y;
                x = parseFloat(x.toFixed(2));
                y = parseFloat(y.toFixed(2));

                if(!$tile.hasClass("loaded")) {
                    $tile.css("background", "url('api/results/"+mapID+"/"+app.curr_zoom+"/"+curr_tile.src+"') no-repeat left top");
                    $tile.css("background-size", "100% 100%");
                    $tile.addClass("loaded");
                    $tile.css({
                        "width": curr_tile.width+"px",
                        "height": curr_tile.height+"px"
                    });
                }
                if(app.browser=="ie") {
                    $tile.css({
                        "transform-origin": "0% 0%",
                        "-ms-transform": "translate("+x+"px,"+y+"px) scale("+scale+","+scale+")"
                    });
                }
                else {
                    $tile.css({
                        "transform-origin": "0px 0px 0px",
                        "-webkit-transform": "translate3d("+x+"px,"+y+"px, 0px) scale("+scale+","+scale+") rotate(0.01deg)",
                        "-moz-transform": "translate3d("+x+"px,"+y+"px, 0px) scale("+scale+","+scale+") rotate(0.01deg)",
                        "transform": "translate3d("+x+"px,"+y+"px, 0px) scale("+scale+","+scale+") rotate(0.01deg)"
                    });
                }
                if(!$tile.is(":visible")) {
                    $tile.show().addClass("shown");
                }

            }
            else {
                if($(selector).length!=0){
                    $(selector).hide();
                } 
            }

        }
    }

    $(".fm-tiles[data-map='"+app.mapID+"'] .fm-tile:not([data-zoom='"+app.curr_zoom+"'])").hide();

}

app.refresh\u map=function（）{
var curr_map=app.maps[app.curr_zoom]；
var maxI=curr_map.tiles.length-1；
var maxJ=curr_map.tiles[0]。长度-1；
var scale=app.zooms[app.curr_zoom][app.curr_scale]；
对于（var i=0；i