CSS animation visibility: visible; works on Chrome and Safari, but not on iOS

Question

In Chrome (19.0.1084.46 m on WinXP) and Safari (5.1.7 on OS X 10.7.4), this fiddle http://jsfiddle.net/Vkpwm/ works; clicking on the google image shows/hides the green div, but when loading it on my iPhone, and on the iPhone simulator in xCode (by using the direct page http://jsfiddle.net/Vkpwm/show/), the div never gets shown again.

Removing the line "-webkit-transition: 0.5s;" from the css makes it work, but obviously breaks the animation. Removing the line "visibility: hidden;" also makes it work, but means that the div is still there and events get fired on it (e.g. the alert is fired even though the div is fully opaque).

Is this an iOS bug, or am I doing something wrong that the desktop browsers are able to work around?

Answer 1

I finally found a solution after finding this question on SO: iOS CSS opacity + visibility transition.

I had to apply the transition to opacity only when setting visibility: visible, but leave it applied to visiblity: hidden in order to make the opacity animate before it got hidden.

My updated and working fiddle is http://jsfiddle.net/Vkpwm/3/.