IOS CSS opacity + transition to visibility

Question

Take a look at the following test in your desktop browser ( JSFiddle ):

a { background: gray; display: block; margin: 100px; padding: 100px; } a span { opacity: 0; -webkit-transition: 0.5s; visibility: hidden; } a:hover span { opacity: 1; -webkit-transition: 0.5s; visibility: visible; } 

 <a href="#">a <span>span</span></a> 

Hover over the anchor element and the span element freezes as it should.

Now take a look through your iOS device. Result: he does nothing.

Facts:

• If there is no transition property, it works.
• If the opacity or visibility property is missing, it works.
• The webkitTransitionEnd event was not fired for the opacity or visibility property.

Is there any workaround?

Answer 1

Only the opacity in the transition sucks.

Since on iPhone you need to click to focus the element, here is how I 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 added an opacity transition to: active.

Thus, it works with all transition animations (think you want to apply animations to the height or something else) in Chrome, Firefox, and iPhone (when clicked).

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

(copy / paste my answer from CSS animation visibility: visible, works in Chrome and Safari, but not in iOS )

Answer 2

With some minor changes to the transition property, this may work on iOS. On :hover limit transition only the opacity property, for example:

 a:hover span { opacity:1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; visibility:visible; }​ 

While visibility is an animated property , it seems to be a bug in the implementation of iOS. When you try to transition visibility , it seems that the whole transition is not happening. If you just limit your transition to opacity , everything works as expected.

To be clear: Leave the visibility property in your CSS, just don't try to translate it if you want everything to work in Mobile Safari.

For reference, here is your updated fiddle that I tested on the iPad:

 a { background: gray; display: block; margin: 100px; padding: 100px; } a span { opacity: 0; -webkit-transition: 0.5s; visibility: hidden; } a:hover span { opacity: 1; -webkit-transition: opacity 0.5s; visibility: visible; } 

 <a href="#">a <span>span</span></a>