Firefox渲染背景圖片

Question

我在網站上使用封面時遇到問題。 封面是由覆蓋整個瀏覽器窗口的圖像組成的頁面，已在所有瀏覽器中正確加載，但是當我向下滾動然后再次向上滾動時，圖像會失真（僅在使用Firefox時）。 解釋的最簡單方法是顯示網站： http : //arkad.tlth.se 。 背景圖像的CSS如下：

.site-wrapper-inner {
 display: table-cell;
 vertical-align: top;
 background: url(http://arkad.tlth.se/wp-content/uploads/2014/05/cover-image.jpg) no-repeat center fixed transparent;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

如果您需要有關代碼的更多信息，請檢查元素。 我嘗試使用它來代替它，但是現在滾動效果消失了。 背景圖像被其他內容滾動的效果。 我試圖將兩者結合起來，使整個屏幕變得白皙。 有什么我想念的嗎？

background: url("http://lewisking.net/images/header-image.jpg") no-repeat scroll 0px 100% / cover transparent;

Answer 1

我能夠確認該問題出現在Firefox中。 背景圖片在Chrome中正確顯示。

如果將display: table-cell更改為display: block ，Firefox中的問題將消失。

我懷疑Firefox的表格單元格高度計算引擎正在引起此問題。

我會嘗試除表格單元格以外的其他顯示模式。

我嘗試使用display: table height: 100%且width: 100% display: table ，它接近您的需求。 可能需要反復試驗。

我能夠重現如下所示的問題（表格單元格顯示了繪圖問題）。

 html, body { margin: 0; } div { background: url(http://placekitten.com/2000/2000) no-repeat center fixed transparent; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 400px; } div.bg-cell { border: 2px dashed red; display: table-cell; height: 400px; width: 1000px; /* the width is for demo only... */ } div.bg-block { border: 2px dashed blue; display: table; /* block also works... */ } 

 <div class="bg-cell"></div> <div class="bg-block"></div> 

Answer 2

嘗試這個：

.site-wrapper {
 display: block;
 vertical-align: top;
 background: url(http://arkad.tlth.se/wp-content/uploads/2014/05/cover-image.jpg) no-repeat center fixed transparent;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

並刪除“ .site-wrapper-inner”規則。