我正在设计一个网站布局,该布局使用 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 中正常显示吗?
最佳答案
看起来这个问题是 Firefox 35 中一个难以复制的错误。 我安装了 36 beta 并解决了渲染问题。
关于css - css 动画中的图像在 firefox 中显示之前未完全加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28532682/