Question

我有really simple page使用照片作为全屏幕背景。我正在使用以下内容来定义它：

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

显然，图片在更改页面后需要一段时间才能加载，因此我实现了一个点头jQuery $.load()来更新内容，而不会产生整页重新加载的开销。

不幸的是，当新内容导致页面长度发生变化时，firefox似乎有问题。 Firefox正确地意识到背景图像的比例必须改变并适当地重新绘制内容div后面的页面 - 但是不会重新绘制页面的其余部分 - 因此它看起来像2个不同缩放的图像是重叠。

调整窗口大小或进行重新绘制会修复它。不幸的是，我无法截取屏幕截图，因为它从未显示过问题 - 可能是它在幕后重现。

要演示此问题，请访问该网站，缩小浏览器窗口，以便内容强制滚动条。使用菜单更改URL。与页面的其余部分相比，查看主要内容背后的图片（关于我们和样本广告是长页面，联系我们/价格很短）。

如何强制firefox进行完整重绘？我想我正在寻找相当于WinForm的Me.Invalidate()。有更好的方法来制作背景图片吗？

注意：我缩小/降低了照片以减少文件大小，但还没有花费很多时间 - 我知道它可以更好。

修改环境：FF9.0.1 Win7 Ultimate x64。

重现的步骤：

Browse here
调整窗口大小，使白色内容区域位于浏览器窗口底部的上方（此外，确保您可以在后台看到一些土地以使效果更加明显）
点击“示例广告”链接
在尺寸和尺寸之间来回点击价格/样本广告
当您这样做时，您会注意到菜单右侧的任何内容都无法缩放，但菜单/内容下的图像会缩放。

Answer 1

我发现问题可能与您的问题有关。将其添加到您的stylehseet：

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

你知道，background-size:cover;仅涵盖身体的物理尺寸。假设您的body实际上只有400px的内容，但您的窗口高度为1000px。浏览器首先对400px高background-size:cover;应用body，然后它会看到窗口中有600px的空间，并且可以进一步应用背景;在这种情况下，平铺/重复它。通过给html / body一个100％的最小高度，如上所述，你的身体将始终填充可用的高度。

Answer 2

我有两种解决方案。

首先是加载新内容，请执行以下操作：

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的错误（如果您还没有，或者系统中不存在）。

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

2 个答案: