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?

Edit
Report