Is hardware accelerated CSS3 in Safari 4 & 5 broken, or my CSS and JS?

Question

I've created a somewhat silly site that shows you the expected weather forecast for any city in the World. On webkit based browsers, when the weather is sunny a sun with CSS3 animated rotated sunbeams appears. This works fine on Chrome.

An example (sunny, at the moment) page is: http://willitraintoday.co.uk/iceland/reykjavik/

However, when viewed in Safari 4 or 5 on Mac Snow Leopard, when the sun appears the sky background appears over it. Weirder still, as the cloud containing the advert moves across the sky, it squashes the main text. When the cloud reaches the left edge, the text appears wider than normal and starts squashing down again.

I've tried: - Disabling the CSS3 animation; it works fine in Safari - Juggling the z-index of various elements; to no avail

Is there something up with my Javascript or CSS , or is the hardware accelerated snow leopard Safari broken in this case?

It seems not to happen in Safari 4 on Leopard, but I don't have Leopard any more to test myself.

Grateful for any opinions!

Answer 1

Setting z-index:30000; on img#sun-rays and img#sun-face works for me. Safari 5.