firefox'background-size：cover'bug的解決方法

我有一個使用照片作爲全屏背景的really simple page。我使用的是下面來定義它：firefox'background-size：cover'bug的解決方法

body { 
    background-image: url('../Images/Backgrounds/Hillside.jpg') ; 
    background-size: cover; 
    margin: 0px; 
}

的圖像，很明顯，需要一點時間改變後，頁面加載，所以我已經實現了一個諾迪的jQuery $.load()更新不完整的開銷內容頁面重新加載。

不幸的是，當新內容導致頁面長度發生變化時，Firefox似乎有問題。 Firefox正確認識到，背景圖像的比例尺必須適當地更改並重新繪製內容div後面的頁面 - 但不會重新繪製頁面的其餘部分 - 因此它看起來像2個不同比例的圖像被疊加。

調整窗口大小或導致重繪修復它。不幸的是，我不能截圖，因爲它從來沒有顯示出問題 - 大概它在幕後重繪。

爲了演示該問題，請訪問該網站，縮小瀏覽器窗口，以便內容強制滾動條。使用菜單更改網址。看看主要內容背後的圖像（與我們和樣本廣告是長頁面，聯繫我們/價格很短）。

我該如何強制firefox做一個完整的重繪？我想我正在尋找相當於WinForm的Me.Invalidate()。有沒有更好的方式來做背景圖片？

注意：我已縮小/降低照片的大小以縮小文件大小，但尚未花費大量時間 - 我知道它會好得多。

編輯： 環境：FF9.0.1 Win7旗艦版x64。

重現步驟：

Browse here
調整窗口的大小，使白色內容區僅瀏覽器窗口（另外，它的方便，以確保你可以看到在一些土地的底部上方背景，使效果更明顯）
點擊「樣品信息」鏈接
點擊來回大小之間&價格/示例廣告
當您這樣做時，您會注意到菜單右側的任何內容都無法縮放，但菜單/內容下的圖像確實無法縮放。

來源

2012-01-19 Basic

我沒有看到列出的效果。什麼是重現問題的步驟，以及您使用的是哪種版本的FF/OS？ – Ktash

@Ktash添加了步驟和環境。感謝您的關注 – Basic

我有兩種解決方案。

首先是簡單地加載新的內容請執行以下操作：

document.body.backgroundSize = 'auto'; 
document.body.backgroundSize = 'cover';

只需告訴它重新計算的覆蓋面積。

第二個是非常hacky，字面上只是告訴FF重新應用所有樣式。

for(var ss = 0, len = document.styleSheets.length; ss < len; ss++) { 
    document.styleSheets[ss].disabled = true; 
    document.styleSheets[ss].disabled = false; 
}

也就是說，我也會將此報告爲FF的錯誤（如果您還沒有或者系統中不存在）。

來源

2012-01-19 20:32:45 Ktash

謝謝，很高興別人已經能夠確認它正在發生。我想現在我會使用第一個選項。我沒有檢查錯誤分貝，但我會。 – Basic

嗯，第一個不起作用 - 即使我設置了setTimeout（），所以它不能被一些優化包裝起來，根本沒有任何事情發生。我要去調查，但沒有標記爲答案，直到我確認我可以得到它的工作:) – Basic

它在控制檯中工作，但它可能是它正在優化出來，或它會因爲它認爲它需要快速重繪。你是在'setTimeout'還是在第二個包裝？如果是兩者，我會嘗試在'setTimeout（func，0）'中包裝第二個項目，以便將它設置爲在當前執行堆棧的末尾運行 – Ktash

我看到一個問題，可能屬於您的問題。添加到您的stylehseet：

html, body {min-height:100%;}

你看，background-size:cover;只覆蓋身體的物理尺寸。假設您的body其內容實際上只有400像素，但您的窗口高度爲1000像素。瀏覽器首先應用background-size:cover;，對於400px高的body，它會這樣做，然後它會看到窗口中的空間增加了600px，並且善意地應用背景;在這種情況下，平鋪/重複它。如上所述，通過給html/body一個100％的最小高度，您的身體將始終填充可用高度。

來源

2012-01-19 19:58:58 rgthree

我誤解了您的問題，因爲我認爲這是關於我立即在高屏幕上注意到的垂直拼貼，即使您正在使用'background-size：cover;'。我鼓勵你使用我的修復程序，即使它沒有解決你的重繪問題。 – rgthree

我會這樣做的，非常感謝 – Basic

firefox'background-size：cover'bug的解決方法

回答

相關問題