background-size：封面性能問題

Question

我遇到性能問題（尤其是在Safari中）使用大量元素background-size: cover。我已經添加了transform: translate3d(0,0,0)這對我有一點幫助，但沒有我想要的那麼多。如果可能的話，我真的很想找一個純CSS的修復程序。

Answer 1

jsFiddle Demo

background-size:cover具有全線可怕的性能。我之前發現了許多使用它的問題，並放棄了這種方法。

在div內使用圖像，將div的大小設置爲您希望使用的尺寸。有圖像尺寸爲這樣：

left:0; 
right:0; 
top:0; 
bottom:0; 
position:relative; 
width:100%; 
height:100%; 

，並直接指定圖像的URL被加載到src="url"。

甚至你可以看到這個艱苦的測試，它就好了（在Safari中進行測試，即使 - jQuery的用於演示簡潔）

var place = "http://placehold.it/"; 
var all = $("<div>"); 
for(var w = 5; w < 100; w++){ 
for(var h = 5; h < 100; h++){ 
    var nwln = $('<div>'); 
    var img = $('<img class="sq">'); 
    nwln.width(w*2); 
    nwln.height(h*2); 
    var url = place + w + "x" + h; 
    img[0].src = url; 
    nwln.append(img); 
    all.append(nwln); 
} 
} 
$("#grid").append(all);