Question

<body onload ="start()">

<div id="masc">
<div id="cont">

</div>
</div>
</body>

我遇到了Microsoft Edge中背景位置更改的问题。这很慢。其他浏览器就好了。这是我的素描。也许是因为#cont div的宽度。它很大。但在其他浏览器中没有问题...

function start(){
    var cont = document.getElementById("cont");
    for(var i = 0; i<1440; i++){
        var celda = document.createElement("DIV");
        celda.className = "celda";
        celda.id=Math.floor(i/60) + ":" + (i%60);
        celda.innerHTML = Math.floor(i/60) + ":" + (i%60);
        celda.offsetRight = function(){return (this.offsetLeft + this.offsetWidth + (this.style.borderWidth*2));};
        cont.appendChild(celda);

    }
}

.celda {
    display: inline-block;
    margin-left:5px;
    border:solid 1px red;
    width:30px;
    height:80px;
    margin-top: 225px;
    color: white;
    padding-top: 40px;
    background-image : url("difusor_cerrado.png");
    background-position : 0px -80px;
    background-repeat : no-repeat ;
}

.celda:hover{
background-position : 0px 0px;
}


#cont {
    margin-top:44%;
    background : transparent; ;
    display:table;
    white-space: nowrap;
    height:350px;
    position:relative;

    border:solid 1px black;

}
#masc {
    width:1000px;
    height:800px;
    margin:auto;
    overflow-y :hidden;
    overflow-x : auto;
    border:solid 1px blue;
    background-image : url("hierva.png");
    background-position : 0% 99%;
    background-repeat: repeat-x;
}

这是我用作背景的图像

IE中缓慢的背景位置变化

0 个答案: