Tremblements lors de l'utilisation d'une transformation CSS sur un lien

Question

J'ai un pied de page de navigation. La navigation est une liste non ordonnée comportant six éléments de liste, chaque élément ayant une balise d'ancrage ou de lien.

Ma question est la suivante : lorsque je survole l'élément de la liste qui est en fait un lien, il se déplace de -3px sur l'axe Y (selon le code CSS), mais lorsqu'il revient à l'état de lien ou à l'état normal, le texte du lien se déplace vers le haut et vers le bas.

Quelle est la cause de ce comportement anormal ?

Mon expérience est récente avec CSS et HTML.

J'ai lu quelque part que (backface visibility : hidden ;) mais je ne sais pas comment l'utiliser et où l'utiliser pour résoudre ce problème, mais comme je l'ai dit plus haut, je débute avec CSS et je ne sais pas trop comment ça marche.

.nav {
  list-style: none;
  padding: 4rem;
  background-color: #101d2c;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 2rem;
  align-items: center;
}

.nav__link:link,
.nav__link:visited {
  text-decoration: none;
  font-size: 1.4rem;
  font-family: 'Josefin Sans', sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  padding: 1.5rem;
  display: block;
  transition: all .2s;
}

.nav__link:active,
.nav__link:hover {
  background-color: rgba(#fff, .05);
  transform: translateY(-3px);
}

<ul class="nav">
  <li class="nav__item"><a href="#" class="nav__link">Find your dream home</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Request proposal</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Download home planner</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Contact us</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Submit your property</a></li>
  <li class="nav__item"><a href="#" class="nav__link">Come work with us!</a></li>
</ul>

Answer 1

Je ne peux pas vous expliquer pourquoi la transformation CSS n'est pas fluide, mais c'est un problème courant que je remarque quotidiennement sur le web. CSS a beaucoup de bugs et de défauts étranges et c'est actuellement l'un d'entre eux.

Voici une solution de contournement qui vous permettra au moins d'obtenir ce que vous souhaitez sans que le texte ne soit tremblant :

Supprimer la transformation css et ajouter une marge supérieure négative :

.nav__link:active,
.nav__link:hover {
  background-color: rgba(#fff, .05);
  transform: translateY(-3px); <-- remove this line
  margin-top: -6px; <-- add this line
}

J'ai utilisé 6px de marge supérieure négative ( -6px ), car cela ressemble beaucoup à l'utilisation de 3px de css transform translate.

https://codepen.io/anon/pen/yZweLp?editors=1100#0

Answer 2

Je ne sais pas pourquoi, mais lorsque j'ai ce problème, j'utilise backface-visibility: hidden; et cela résout généralement le problème.