CSS animation visibility: visible; works on Chrome

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/.

Answer 2

Only opacity on transition sucks.

Since that on iPhone you need to tap in order to focus an element this is how I've fixed my problem:

.mydiv {
        visibility:hidden;
        opacity: 0;
        transition: all 1s ease-out; 
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
}
.mydiv:hover {
            visibility:visible;
            opacity: 1;
}
.mydiv:active {
            -webkit-transition: opacity 1s ease-out;
}

I've added the opacity transition to :active.

This way it works with all transition animation (consider that you want to apply animation to height or somethibg else) on Chrome, Firefox and iPhone (on tap).

Thanks to Grezzo and Michael Martin-Smucker for spotting out about the opacity transition.