Fehler beim Neigungseffekt beim Schweben

Question

Ich habe eine Schaltfläche mit Neigungseffekt, in der sich ein Text befindet, und wenn ich mit der Maus über die Schaltfläche fahre, erscheinen zwei Linien neben der Schaltfläche.

Es gibt Code, bewegen Sie den Knopf, bis Sie ihn sehen , es ist ein sehr zufälliger Nebeneffekt.

Ich denke, dass es sich um ein Chrome-Problem handelt, bin mir aber nicht sicher. Hier ist ein Bild des Problems: 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

嗯..这确实是一个渲染错误。我发现一条 CSS 行似乎是一种解决方法，但它使我的系统上的按钮文本有点模糊。这可能就是您正在寻找的内容。

据说它改变了元素的浏览器动画优化。

will-change: transform;

请参阅下面的代码片段，它不再显示线条了：

.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