title: iOS CSS opacity + visibility transition
body: <p>Take a look at the following test in a desktop browser (<a href="http://jsfiddle.net/jrpSJ/" rel="nofollow">JSFiddle</a>):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#"&gt;a &lt;span&gt;span&lt;/span&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You hover over the anchor element and the span element fades in like it should.</p>
  
  <p>Now take a look via an iOS device.
  Result: it does nothing.</p>
  
  <p>Facts:</p>
  
  <ul>
  <li>If the transition property is absent, it works.</li>
  <li>If either the opacity or visibility property is absent, it works.</li>
  <li>There is no webkitTransitionEnd event being fired for the opacity or visibility property.</li>
  </ul>
  
  <p>Is there any workaround?</p>