css - css 动画中的图像在 firefox 中显示之前未完全加载

Question

我正在设计一个网站布局，该布局使用 CSS 动画、动画延迟和不透明度来实现淡入淡出的图像幻灯片。与此非常相似code .

在 IE 和 Chrome 中，图像完整显示，动画效果完美。然而，在 Firefox 中，每个图像在循环时只显示部分图像。这可以通过 Firefox 或图像链接在 code.io 链接中看到。 http://i60.tinypic.com/24yr536.png

就好像图片在显示之前没有完全下载。

我已经在两台装有 Firefox 35 的 Win7 机器和一台 Win8.1 平板电脑上试过了，结果相同。如果与下载速度有关，我的互联网连接是 ADSL 2+。我已经尝试在容器函数上使用带有 animation-delay: 3s; 的虚拟动画来给 img 动画加载时间，但这没有用。更改图像文件大小确实有助于显示更多图像，但仍然缺少一些位。通过搜索似乎没有其他人遇到此问题，这让我认为这可能只是我计算机上的设置。

到目前为止，我已经设法避免在此页面中使用 javascript，我宁愿保持这种方式，但如果这是唯一的解决方案，我会很乐意考虑。

有什么方法可以让这个幻灯片在 Firefox 中正常显示吗？

Answer 1

看起来这个问题是 Firefox 35 中一个难以复制的错误。我安装了 36 beta 并解决了渲染问题。

https://bugzilla.mozilla.org/show_bug.cgi?id=1122845