爲什麼background-size：cover;減慢我的jQuery動畫？

我一直在努力去理解爲什麼我剛剛開始構建的網站上的jQuery動畫運行如此緩慢......原來這是與背景大小有關：我已經應用到大背景圖片在身體標籤上。爲什麼background-size：cover;減慢我的jQuery動畫？

緩慢的表現只發生在我身上的Firefox，它在safari和chrome中的罰款，我試圖禁用所有的附加組件，所以不認爲它會影響事情的任何東西。

當我在firebug中關閉background-size時，我的jQuery slideDown效果運行平穩。把它放回去，他們跑得更急。同樣的事情發生時，我動畫使用CSS3轉換，而不是。

任何想法爲什麼background-size屬性影響動畫？

有問題的頁面是：http://flc.timidmedia.co.uk/如果您將鼠標懸停在右欄上，您應該看到動畫。

2011-08-14 Tim

不是一個真正的答案，但：難道你不能只是使背景適合的大小？製作一個小的bg會讓它變醜，讓一個小的bg變得不必要的大。我在你的網站上發現的另一件事：如果你多次在擴展的子文本上進行鼠標懸停/懸停，它會多次摺疊/摺疊 – PeeHaa

毫米，但是合適的尺寸是多少？我已經把2560x1440這個圖像做成了幾乎所有常用的最大分辨率..確定它的文件大小也是合理的......我使用背景大小的原因是：封面是爲了使圖像「正確大小'的大多數屏幕分辨率.. ..我知道我有一個動畫鏈接的問題，但我被這個'問題'的側面。感謝您的評論。 – Tim

可能發生是因爲background-size:cover必須進行額外的計算才能正確呈現。

看到這個解釋什麼需要發生，使其工作。

蓋

指定背景圖像應該被縮放成儘可能小，同時確保它的兩個尺寸大於或等於背景定位區域的相應尺寸。

只是猜測，但也許FF的發動機是在這一個慢？

2011-08-15 02:40:05

是的，我認爲這將是一個瀏覽器上更密集..但當然，當瀏覽器窗口不被調整大小，你不會認爲這會給瀏覽器帶來很大的壓力？ – Tim

我知道這是一箇舊帖子，但今天偶然發現了這一點，並希望響應Tim的評論 - 即使瀏覽器沒有調整大小，它仍然在四處移動DOM元素，這需要重新繪製瀏覽器並重新計算背景大小。 – elkaz

回答