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

ios5 css mobile-safari mobile-webkit css-animations
Grezzo picture Grezzo · May 24, 2012 · Viewed 7.5k times · Source

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

Grezzo picture Grezzo · May 24, 2012

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

Related questions

iOS 5.0 Safari not vertically centering placeholder in text box

I want to vertically center the text entered in input text boxes on the page. Typical way to achieve this is to set the line-height and height equal. This works on pre iOS 5.0 Safari. However; on iOS 5, Safari displays the …

Read More
CSS3 property webkit-overflow-scrolling:touch ERROR

iOS 5 released web designers a new property -webkit-overflow-scrolling:touch that uses the iOS devices hardware accelerator to provide native scrolling for a scrollable div. When implemented on our site in development it does work but not well. I believe there …

Read More
Why does applying '-webkit-backface-visibility: hidden;' fix issues with negative margin transition on on ios / ipad 5.1?

I have stumbled on a fix for my issue by accident - and I don't like applying fixes I don't understand. <ul> <li><img src="something.jpg" /></li> <li><…

Read More