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