Kesan kecondongan pepijat pada tuding

Question

Saya mempunyai butang dengan kesan kecondongan yang mempunyai teks di dalamnya dan apabila saya mengarahkan butang dua baris muncul di sebelah butang. Terdapat kod yang berlegar di atas butang sehingga anda melihatnya, yang merupakan kesan sampingan yang sangat rawak. Saya rasa ini adalah masalah dengan Chrome, tetapi saya tidak pasti. Berikut ialah gambar masalah: https://prnt.sc/hafHhDOHntco.button-skew{position:relative;width:fit-content;padding:6px40px;borde

P粉505917590 · Answer

Hmm..ini memang pepijat rendering. Saya menjumpai baris CSS yang kelihatan seperti penyelesaian, tetapi ia menjadikan teks butang agak kabur pada sistem saya. Ini mungkin yang anda cari.

Ia dikatakan mengubah pengoptimuman animasi pelayar bagi elemen.

will-change: transform;

Lihat coretan kod di bawah yang tidak menunjukkan baris lagi:

.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