javascript - Safari 4 和 5 中的硬件加速 CSS3 是否损坏，或者我的 CSS 和 JS？

Question

我创建了一个有点傻的网站，向您显示世界上任何城市的预期天气预报。在基于 webkit 的浏览器上，当天气晴朗时，会出现带有 CSS3 动画旋转阳光的太阳。这在 Chrome 上运行良好。

一个示例(目前是晴天)页面是: http://willitraintoday.co.uk/iceland/reykjavik/

但是，当在 Mac Snow Leopard 上的 Safari 4 或 5 中查看时，当太阳出现时，天空背景出现在它上面。更奇怪的是，当包含广告的云在天空中移动时，它压扁了正文。当云到达左边缘时，文本看起来比正常情况更宽，并再次开始压扁。

我试过:- 禁用 CSS3 动画；它在 Safari 中运行良好- 处理各种元素的 z-index；没用

我的 Javascript 有什么问题吗？或 CSS , 还是在这种情况下硬件加速的雪豹 Safari 坏了？

在 Leopard 上的 Safari 4 中似乎不会发生这种情况，但我没有 Leopard 来测试自己。

感谢任何意见!

Answer 1

在 img#sun-rays 和 img#sun-face 上设置 z-index:30000; 对我有用。 Safari 5。