html - Firefox 中的巨大背景图像至少在调整大小后消失

Question

我想加载一个 48000x990px​​ 的巨大 jpg 作为背景图像。

HTML:

<div id="car-canvas-wrapper">
  <div id="car-canvas" style="background-image: url('http://via.placeholder.com/48000x320');"></div>
</div>

CSS

html,
body {
  padding: 0;
  margin: 0;
}

#car-canvas-wrapper {
  width:100%;
  position: relative;
}

#car-canvas {
  background-size: cover;
  width: 100%;
  padding-top: 51.5625%;
}

您将在 CodePen 中找到示例:https://codepen.io/anon/pen/ypyMpZ

在 Chrome、Edge、Internet Explorer 和 Safari 中一切正常。但是在 Firefox 中存在一些严重的问题。有时，当我清理缓存时会加载图像。如果它加载并且我调整窗口大小，图像消失。在检查器中，我看到调整大小后，背景图像变为 0x0px。

显然图片太大了。问题:为什么除Firefox以外的所有浏览器都能显示图片？

编辑:我从我的网络服务器中删除了巨大的图像并插入了一个占位符图像 (48000x320px)。如果您遇到类似问题并阅读此主题，请记住这一点。

Answer 1

Firefox 对图像的修复可能不仅仅是这个简单的解决方案，但我发现这是一个在以前的元素中可行的解决方案。

只需添加以下 css:

#car-canvas-wrapper { display: block;}

应该可以解决问题。