CSS3背景大小屬性導致ff5極端性能問題

今天我一直在把一個頁面放在一起，並認爲我會使用CSS3實現條紋背景。在Firefox以外的所有瀏覽器中，似乎都很好。（我使用的是5.01，但在5.0檢查過）CSS3背景大小屬性導致ff5極端性能問題

的代碼很簡單：

body { 
    background-color: #ebeced; 
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, 
    transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%,transparent 75%, transparent); 
    background-size:6px 6px; 
    }

在Chrome和Opera偉大的作品，但它幾乎崩潰FF。

很明顯，我知道我可以實現與重複的背景圖片的效果，但我想知道如果任何人有類似的問題，或只是再次磨合與CSS3的問題;）

測試中的jsfiddle產生相同問題，我沒有做出小提琴，因爲我不想讓你崩潰負責！

哦，這不是一個緩慢的電腦問題，我在一個i7,8GB內存，等等等等。

我認爲這是一個背景大小的屬性問題，就好像你增加或完全移除它然後問題已解決，但它不適合我，除非我可以使用背景大小。

來源

2011-07-20 tcnarss

聽起來像你應該報告的錯誤。猜測，這裏發生的事情是平鋪梯度非常慢，但是如果沒有實際的測試用例很難分辨出來。我只是在Fx4和Fx5以及每晚都嘗試過你的代碼片段，而且都沒有顯示任何性能問題。但請注意，這可能取決於操作系統，現在我在Mac上。如果你真的在Mozilla上報告錯誤，請在cc字段添加「：bz」。或者，如果您可以指示我展示問題，我可以爲您報告錯誤。 –

感謝您的回覆。我現在在w7上，我只會開火雪豹並先在那裏檢查它，這樣我可以發送更完整的錯誤報告。我會確保我cc .bz。 – tcnarss

我可以確認它不會影響Mac上的FF，現在寫出bug。 – tcnarss

您是否嘗試過加入...

-moz-background-size:6px 6px;

...你的CSS？

來源

2011-07-20 18:39:43

是甚至是合法的財產？我無法在任何地方看到它的參考。 +它不起作用！ – tcnarss

對於一些CSS3屬性，爲了兼容性（類似於'-webkit-'，'-o-'，'-khtml-'），您需要預先加入'-moz-'。對不起，這不適合你，但是。這是一個合法的屬性：** http：//www.css3.info/preview/background-size/** –

我明白了！謝謝你讓我知道，但是沒有前綴的背景大小似乎適用於FF但它的速度非常慢，最終崩潰！ -moz-background-size似乎並沒有被ff的最新版本拾取。 – tcnarss

我很確定我知道問題是什麼。

性能問題對我來說不是很明顯，但是我在一個新的四核上。我所看到的是，當我創建一個空白頁並將該CSS放在那裏時，如果我調整瀏覽器的大小，重畫會有點笨拙。

這個問題來自於您將繪製CSS3漸變與平鋪該漸變的非常小的尺寸（6px）相結合的事實。這意味着，對於每1000平方英尺的頁面房地產，梯度將平鋪27,777次[1000/6平方]。這是一噸！智能瀏覽器會繪製一次漸變，然後將其平鋪。似乎Firefox可能會每次繪製漸變。如果是這樣的話，那確實是一個錯誤。如果我將後臺大小屬性修改爲更大的值，例如20px，那麼我不再看到性能問題，但其他人會。如果你不希望你的用戶遇到這種問題，我想說你應該遠離這種組合，因爲當你沒有看到任何問題時，速度較慢的計算機仍然會出現問題。

簡單的解決方法是不使用css3漸變。只需創建一個圖像 - 瀏覽器擅長平鋪這些圖像。即使圖像，有時最好使用較大的圖像...

的Netscape Navigator的早期版本中使用，如果他們比40×40像素小到忽略的背景。我記得發現了我試圖解決的錯誤的原因，並意識到儘管能夠使用1x20圖像作爲背景似乎很好，因爲這將是最小的文件大小，但它不是最佳選擇因爲它爲瀏覽器創建了更多的渲染工作。相反，我創建了一個更大的50x20版本的圖像。效果是一樣的，但它節省了一些處理時間。

來源

2011-08-31 10:05:38 MikeyLikesIt

CSS3背景大小屬性導致ff5極端性能問題

回答

相關問題