Bug de l'effet d'inclinaison au survol

Question

J'ai un bouton avec un effet d'inclinaison qui contient un texte et lorsque je survole le bouton, deux lignes apparaissent à côté du bouton.

Il y a du code, Survolez le bouton jusqu'à ce que vous le voyiez , c'est un effet secondaire très aléatoire.

Je pense qu'il s'agit d'un problème lié à Chrome, mais je n'en suis pas sûr. Voici une photo du problème : https://prnt.sc/hafHhDOHntco

.button-skew {
  position: relative;
  width: fit-content;
  padding: 6px 40px;
  border-radius: 5px;
  transform: skewX(-7.5deg);
  background: blue;
  transition: all 0.35s cubic-bezier(.47, 1.64, .41, .8);
}

.button-skew:hover {
  padding: 6px 60px;
  transform: skewX(-7.5deg);
  background: red;
  transition: all 0.35s cubic-bezier(.47, 1.64, .41, .8);
}

p {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: center;
  color: white;
  transform: skewX(7.5deg);
}

<div class="button-skew">

  <p>Contact us</p>

</div>

Answer 1

Hmm..c'est effectivement un bug de rendu. J'ai trouvé une ligne de CSS qui semblait être une solution de contournement, mais cela rendait le texte du bouton un peu flou sur mon système. C'est peut-être ce que vous recherchez.

Il est dit que cela modifie l'optimisation de l'animation du navigateur des éléments.

will-change: transform;

Voir l'extrait de code ci-dessous qui n'affiche plus les lignes :

.button-skew {
  position: relative;
  width: fit-content;
  padding: 6px 40px;
  border-radius: 5px;
  transform: skewX(-7.5deg);
  background: blue;
  transition: background 0.35s cubic-bezier(.47, 1.64, .41, .8),
  padding 0.35s cubic-bezier(.47, 1.64, .41, .8);
  
  will-change: transform;
}

.button-skew:hover {
  padding: 6px 60px;
  background: red;
}

p {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: center;
  color: white;
  transform: skewX(7.5deg);
}

  
Contact us