我正在开发一个网站，其中必须至少有五个<section>s，每个都是视口的大小。
这是一个小提琴。
但我处理的不是纯色，而是大（至少 1000 像素）图像，所有图像都根据background-size: cover. 这在 WebKit 浏览器中运行良好，但 Firefox 是另一回事。图像越大，Firefox 就越不稳定。而这一切都与background-size: cover. 没有它，一切都很顺利。事实上，我发现它适用于 Firefox 中的所有图像缩放。
一位同事建议我用来<canvas>在屏幕外将图像绘制到适当的大小，将画布转换为 base 64，并将其应用为background-imageeach <section>，但这仅适用于小图像。就像我说的那样，这些图像可能非常大，因此该选项似乎不可行。
所以我的问题是：如何使用这些大背景图片，正确调整它们的大小，并在 Firefox 中保持良好的性能？
旁注：我正在运行带有 Retina 显示屏的 MacBook Pro，所以我认为我的系统规格不是这里的问题。它还在其他非 Retina MacBook Pro 上进行了测试，问题仍然存在。