Mengapa Imej Saya Bergetar Apabila Melayang Di Atasnya dalam Chrome?

Melayang di atas Imej: Isu Kelegapan Chrome

Apabila menghadapi masalah dengan pergerakan imej semasa tindakan tuding dalam Chrome, khususnya dengan kesan kelegapan, ia adalah penting untuk menangani punca utama. Dalam kes khusus ini, peraturan CSS:

opacity: 0.5;

Menyebabkan imej menjadi lut sinar (50% kelegapan) apabila kursor melayang di atasnya. Walau bagaimanapun, isu khusus Chrome berlaku disebabkan oleh pecutan perkakasan dan pemaparan WebGL.

Penyelesaian:

Untuk menyelesaikan masalah ini, disyorkan untuk melaksanakan -webkit- backface-visibility: tersembunyi; sifat pada elemen tuding yang menggunakan kelegapan. Sifat ini berkaitan dengan perubahan dan memastikan penyemak imbas memahami imej berada dalam ruang 3D, menghalang kesan kegelisahan.

Secara khusus, peraturan berikut boleh ditambahkan pada CSS:

.img:hover {
  -webkit-backface-visibility: hidden;
}

Maklumat Tambahan:

Adalah penting untuk ambil perhatian bahawa -webkit-backface-visibility ialah sifat khusus webkit, jadi penyemak imbas lain mungkin tidak menyokongnya. Untuk mendapatkan maklumat lanjut dan keserasian penyemak imbas, rujuk sumber berikut: https://css-tricks.com/almanac/properties/b/backface-visibility/.

Atas ialah kandungan terperinci Mengapa Imej Saya Bergetar Apabila Melayang Di Atasnya dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!