Problème de compatibilité sur un effet de transition dans un menu

Bonjour,

Sur le menu suivant : http://codepen.io/anon/pen/NPmJEo

J'ai un problème de compatibilité sur safari que ce soit avec iOS ou OS X ou même avec la version de Safari 5.1.7 sur Windows.

Sur tous les autres terminaux et navigateurs (chrome, firefox, explorer, opéra, etc...) le menu fonctionne parfaitement.

Je pense que le problème vient d'un padding que j'ajoute à ma span pour permettre cet effet de transition / translation verticale sur le hover. Mais sans ce dernier je ne peux pas faire cet effet...

.nav-menu li a span {
    display: block;
    padding: 22px 0;
}

J'ai retourné le problème dans tous les sens. Mais là je sèche !

Quelqu'un aurait-il une idée SVP

Merci d'avance
Modifié par Pur_Web (03 Apr 2015 - 18:12)

hello,

Avec ça au début ça marche :

*{
  border:1px solid red!important;
  vertical-align:top;
}

Je te laisse peaufiner