Skew effect bug on hover-CodePudding

I have a button with a skew effect and a text inside, when i hover the button, two lines appears beside the button.

There is the code, hover the button until you see it, it's a very random side effect.

I think it's a problem with Chrome but i'm not sure of it. This is a picture of the problem : 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 >

  <p>Contact us</p>

</div>

CodePudding user response：

Hmm.. it is indeed a rendering bug. I found a CSS line that seems to be a workaround, but it makes the button text a little blurry on my system. It might be what you are looking for.

It supposedly changes the browser animation optimization for the element.

will-change: transform;

See the snippet below, it's not showing the lines anymore for me:

.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);
}

<div >

  <p>Contact us</p>

</div>