Doppeltippen iPad erforderlich für Link mit Farbverlauf auf Pseudo

Question

Auf meiner Hauptnavigation haben Links eine benutzerdefinierte Unterstreichung mit linearen Gradienten auf Hintergrund. Es funktioniert gut, aber auf dem iPad muss ich zweimal tippen, um den Link auszuführen. Eine für den Schwebeflug, eine weitere für die Verbindung. Was kann ich tun, um es zu lösen? Hier

Dank

ist ein Beispiel: http://codepen.io/anon/pen/yOmXby

HTML:

<ul> 
<li><a target="_blank" href="#">element</a></li> 
<li><a target="_blank" href="#">element</a></li> 
<li><a target="_blank" href="#">element</a></li> 
<li><a target="_blank" href="#">element</a></li> 
<li><a target="_blank" href="#">element</a></li> 
</ul> 

CSS:

li { 
    list-style: none; 
    float: left; 
    margin: 0 1em; 
} 

ul li a { 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 1.5rem; 
    margin-left: 60px; 
    height: 30px; 
    line-height: 30px; 
    vertical-align: middle; 
    position: relative; 
    display: inline-block; 
} 
ul li a:before { 
    -webkit-transform: translateX(-50%) translateY(0);-ms-transform: translateX(-50%) translateY(0);transform: translateX(-50%) translateY(0); 
    -webkit-transition: all 0.4s ease 0s;transition: all 0.4s ease 0s; 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    height: 3px; 
    background: #e95b4c; 
    width: 0; 
    opacity: 0; 
    will-change: opacity; 
} 
ul li a:hover:before, ul li a:focus:before, ul li a:active:before { 
    width:100%; 
    opacity: 1; 
} 

Answer 1

Nun, die einzige Lösung, die ich gefunden ist in Javascript.

auf Link Jede Berührung den Link ausführen:

$(document).ready(function() { 

    $('a').on('click touchend', function(e) { 
     var el = $(this); 
     var link = el.attr('href'); 
     window.location = link; 
    }); 

});