двойной кран ipad необходим для связи с градиентом на псевдо

Question

В моей основной навигации ссылки имеют пользовательский подчеркивание с линейным градиентом на фоне. Он отлично работает, но на ipad мне нужно дважды нажать, чтобы выполнить ссылку. Один для зависания, другой для ссылки. Что я могу сделать, чтобы решить эту проблему?

Благодаря

Вот пример: 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

Ну единственное решение, которое я нашел в JavaScript.

Каждое нажатие на ссылку выполнить ссылку:

$(document).ready(function() { 

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

});