Rumah >hujung hadapan web >tutorial css >Mengapa Teks Saya Kabur dalam Chrome Selepas Transformasi CSS?

Mengapa Teks Saya Kabur dalam Chrome Selepas Transformasi CSS?

Patricia Arquette
Patricia Arquetteasal
2024-12-07 02:37:16735semak imbas

Why is My Text Blurry in Chrome After a CSS Transform?

Chrome Mengaburkan Teks Selepas Transformasi CSS: Panduan Membetulkan

Dalam kemas kini Chrome baru-baru ini, pengguna telah menghadapi isu pelik apabila teks menjadi kabur selepas menggunakan sifat transform: scale(). Pembangun yang mencari bantuan menerangkan masalah ini dalam siaran berikut:

Penerangan Masalah:

I'm using @-webkit-keyframes with a scale transform to animate text on my website. However, it's becoming blurry after the scale animation. This wasn't an issue before and doesn't occur in other Webkit browsers like Safari.

Penyelesaian:

Penyelesaian yang dicadangkan melibatkan penggunaan satu atau kedua-dua sifat CSS berikut untuk menyelesaikan pemaparan isu:

  1. Keterlihatan Muka Belakang Tersembunyi: Sifat ini mengehadkan animasi ke hadapan objek, menghapuskan animasi lalai pada kedua-dua bahagian hadapan dan belakang.
backface-visibility: hidden;
  1. TranslateZ: Ini ialah penyelesaian untuk mengaktifkan perkakasan pecutan untuk animasi.
transform: translateZ(0);

Selain itu, sesetengah pengguna telah melaporkan kejayaan dengan menambahkan sifat berikut:

-webkit-font-smoothing: subpixel-antialiased;

Walaupun kaedah ini boleh mengubah pemaparan fon web, ia patut dicuba untuk hasil yang optimum. Menggunakan mana-mana penyelesaian ini atau gabungannya harus membetulkan isu teks kabur selepas transformasi CSS dalam Chrome.

Atas ialah kandungan terperinci Mengapa Teks Saya Kabur dalam Chrome Selepas Transformasi CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn