Safari Mobile transition bug

by Teisi

HTML

<footer id="footer">
  <div class="default" id="c1">
    <div class="ce-textpic ce-right ce-intext">
      <div class="ce-bodytext">
        <h3>Anyone knows why?</h3>
        <ul>
          <li>Line 34 in CSS starts the transition</li><li>with that transition, link dont work on iPhone Safari</li><li>link fires on the second click or without transition</li><li>Android its ok</li></ul>
      </div>
    </div>
  </div>
  <nav id="navfooter">
    <ul class="footer_nav">
      <li><a title="Datenschutz" href="/datenschutz/">Datenschutz</a><span class="re"></span></li>
      <li><a title="Impressum" href="/impressum/">Impressum</a><span class="re"></span></li>
    </ul>
  </nav>
</footer>

CSS

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, summary, time, mark, audio, video {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    position: relative;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
    display: block;
}

*, *::before, *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

a { text-decoration: none; transition: color 300ms ease 0s; }
#footer { background-color: #9e978c; float: left; margin-top: 5px; padding: 13px 6% 12px; width: 100%; }
#footer > .default { padding: 0; width: auto; }
#footer ul { float: left; }
#footer ul li { color: #fff; float: left; list-style: none; left: 0; position: relative; top: 0; }
#footer .ce-textpic, #footer .ce-bodytext { float: left; }
#footer .ce-textpic ul { margin-left: -2px; }
#footer .ce-textpic ul li { padding: 5px 0; }
#footer .ce-textpic ul li:after { content: " "; float: right; padding-left: 6px; padding-right: 10px; position: relative; width: 1px; }
#footer .ce-textpic ul li:last-child:after { display: none; }
#footer #navfooter { float: right; margin-right: -10px; }
#footer #navfooter ul li a { color: #fff; float: left; display: block; left: 0; padding: 8px 10px; position: relative; top: 0; }


/* START: Transition Block */
	#footer #navfooter ul > li > span { 
		background-color: #fff; bottom: -10px; height: 1px; opacity: 0; position: absolute; width: 0;
	  -webkit-transition: all 600ms;
	     -moz-transition: all 600ms;
	       -o-transition: all 600ms;
	          transition: all 600ms;...