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”规则。