Take a look at the following test in a 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>
You hover over the anchor element and the span element fades in like it should.
Now take a look via an iOS device. Result: it does nothing.
Facts:
- If the transition property is absent, it works.
- If either the opacity or visibility property is absent, it works.
- There is no webkitTransitionEnd event being fired for the opacity or visibility property.
Is there any workaround?