[Résolu] Fluidité souligné gradient

Sur un site, j'avais 2 types de soulignés produisant pratiquement le même résultat : trait qui apparait à partir du centre vers les extrêmes.
Le global à base de linear-gradient en background.
Pour mon menu principal, j'utilisais une autre technique à base de translateX sur des pseudos éléments, ce qui me permettait d'ajouter un changement d'opacité qui donnait au changement une fluidité nécessaire sur un menu composé de <a> qui se suivent.
Sauf que mes translateX sur les pseudos me posent problème sur ipad où il faut que je tape 2 fois pour ouvrir un lien. La première fois il fait le hover, la seconde il exécute le lien.
Donc je suis revenu pour le menu principal sur la solution globale à base de linear-gradient. Mais j'ai perdu la fluidité offerte par le changement d'opacité.
>> on voit le lien que l'on vient de quitter 1 quart de seconde alors qu'on est déjà sur l'autre.

J'ai fait un codepen : si quelqu'un a une idée pour que cela reste à cette vitesse à l'allez, mais qu'au retour... enfin de la fluidité quoi.
http://codepen.io/anon/pen/reXMVG

Merci
Modifié par Manhattan (25 May 2016 - 10:51)

peut-être en jouant avec de la transparence et sur le background-size horizontal ?

 /* .... */
   background:linear-gradient(to left, transparent, #e95b4c ,  transparent) bottom center  no-repeat;
    background-size:0% 5%; 
    outline: none;
}
ul li a:hover, ul li a:focus, ul li a:active{
    background-size:250% 10%;
}

Bonsoir

On n'obtient pas le même résultat...

C'est dommage, mes pseudo marchaient bien jusqu'à ce que je découvre que le hover sur les ibidules c'est pas comme ailleurs. Je sais pas vous, mais moi, apple safari, c'est IE d'une autre époque : des blèmes, encore des blèmes, toujours des blèmes.

En fait, il faut imaginer un trait assez épais qui doit faire tag line si on survole tous les menus :

http://codepen.io/anon/pen/reXMVG

D'où le besoin de fluidité.

je n'ai pas de ibidule sous la main, mais une piste : https://developer.mozilla.org/fr/docs/Web/CSS/will-change

https://developer.mozilla.org/fr/docs/Web/CSS/will-change a écrit :
La propriété will-change permet aux auteurs de fournir une indication au navigateur sur la propension d'un élément à changer (afin que le navigateur puisse mettre en place les optimisations nécessaires avant que l'élément change vraiment). Ce type d'optimisation permet d'augmenter la réactivité de la page en effectuant des calculs (éventuellement coûteux) en prévision du changement.

ce qui serait en principe: http://codepen.io/anon/pen/qZeaxg mais en fait , à faire sur ton transform initial et opacity

http://caniuse.com/#search=will-change
Modifié par gcyrillus (22 May 2016 - 21:50)

Hmm, désolé mais je n'ai pas compris

J'ai fait un autre codepen avec mon code actuel qui sur ipad nécessite 2 touch pour exécuter le lien. (Perso je n'ai pas d'ipad mais j'utilise une machine virtuelle El Capitan + le débugueur d'Xcode qui permet de simuler tous les appareils à la pomme et les tests sont très représentatifs.)

J'ai rajouté des target blank pour bien voir sur ma simili tablette si le lien fonctionne au premier clic ou non. Et ce n'est justement pas le cas.

On peut voir aussi sur ce nouveau codepen la fluidité que ne m'apporte pas la solution linear-gradient background...

http://codepen.io/anon/pen/yOmXby

Bon, au final la solution consiste à détecter le touch en js pour exécuter le lien et détourner un élément qui à la base est voulu mais convient rarement aux utilisateurs :

$(document).ready(function() {

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

});

http://cssmenumaker.com/blog/solving-the-double-tap-issue-on-ios-devices