Compatibilité des transitions css

Bonjour tout le monde !

J'ai un petit souci de compatibilité d'un code que je n'arrive pas à faire fonctionner autre part que sur Chrome.

Voici mon code Html

<nav role="navigation">
	<ul>
		<li><a href="#">Salade</a></li>
		<li><a href="#">Tomate</a></li>
		<li><a href="#">Oignons</a></li>
		<li><a href="#">Choucroute</a></li>
		<li><a href="#">Picon bière</a></li>
	</ul>
</nav>

Voici le code css

body {font-family: sans-serif; font-size: 1.2em; margin: 20px;}

nav li {
  display: inline-block; 
}

nav a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
  background-image: linear-gradient(gray, gray);
  background-repeat: no-repeat;
  background-size: 0% 4px;
  background-position: center 100%;
  transition: background .20s ease-in;
}
nav a:hover {
  background-size: 100% 4px;
}

Ca fonctionne parfaitement sur Chrome mais sur les autres, j'ai essayé de trouver des codes de compatibilité en vain, voici par exemple ce que j'ai testé et qui ne fonctionne pas chez moi :

body {font-family: sans-serif; font-size: 1.2em; margin: 20px;}

nav li {
  display: inline-block; 
}

nav a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
  background-image: linear-gradient(gray, gray);
  background-repeat: no-repeat;
  background-size: 0% 4px;
  background-position: center 100%;
  transition: background .2s ease-in;
   -webkit-transition: background .2s ease-in; 
   -moz-transition: background .2s ease-in; 
  -o-transition: background .2s ease-in; 
}
nav a:hover {
  background-size: 100% 4px;
}

Avez-vous une solution please ?

Merci !

Bonjour,

Qu'et-ce qui ne marche pas ?

Sur Chrome, Firefox, Safari avec Mac OS X, ça semble fonctionner de la même manière avec les 3 navigateurs.
EDIT: j'ai utilisé le premier code.

Amicalement,
Modifié par parsimonhi (07 Mar 2019 - 09:23)

Salut,

La code que tu nous a donné en premier marche pour moi sur Chrome 72, Firefox 65 et Edge 41.

Salut,
mais il ne fonctionne pas sur Internet Explorer !

Salut,

soinf a écrit :
je n'arrive pas à faire fonctionner autre part que sur Chrome.

c'est très différent de :

soinf a écrit :
ne fonctionne pas sur Internet Explorer !

Transition sur le background-size n'a effectivement pas l'air de marcher sur IE. En même temps c'est du stylé poussé sur un vieux navigateur (qui même quand il était jeune n'étais pas à la pointe de ce coté là...)

Il faut trouver une autre technique ou te passer de IE

Bonne soirée

Tout marche impec chez moi.

Les transitions de fond avec les gradiant, c'est casse gueule.

Je te conseillerai plutôt d'ajouter un pseudo element en absolute et avec opacité de 0, avec le style de fond souhaité. Puis appliquer une transition d'opacité sur ton pseudo element au hover.

Cela fonctionnera sur tous tes navigateurs.
Modifié par Pedrothelion (12 Mar 2019 - 13:15)