Pertanyaan Teks buram setelah menggunakan transformasi CSS: skala (); di Chrome


Sepertinya ada pembaruan terkini ke Google Chrome yang menyebabkan teks buram setelah melakukan transform: scale(). Khususnya saya melakukan ini:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Jika Anda berkunjung http://rourkery.com di Chrome, Anda seharusnya melihat masalah pada area teks utama. Itu tidak digunakan untuk melakukan ini dan tampaknya tidak mempengaruhi browser webkit lain (seperti Safari). Ada beberapa posting lain tentang orang yang mengalami masalah serupa dengan transformasi 3d, tetapi tidak dapat menemukan apa pun tentang transformasi 2d seperti ini.

Setiap ide akan dihargai, terima kasih!


75
2018-02-03 21:26


asal


Jawaban:


Saya memiliki masalah ini beberapa kali dan tampaknya ada 2 cara untuk memperbaikinya (ditunjukkan di bawah). Anda dapat menggunakan salah satu dari properti ini untuk memperbaiki render, atau keduanya secara bersamaan.

Visibilitas Backface tersembunyi memperbaiki masalah karena menyederhanakan animasi hanya ke bagian depan objek, sedangkan keadaan default adalah depan dan belakang.

backface-visibility: hidden;

TranslateZ juga berfungsi sebagai peretasan untuk menambahkan akselerasi perangkat keras ke animasi.

transform: translateZ(0);

Kedua properti ini memperbaiki masalah yang Anda alami tetapi beberapa orang juga ingin menambahkan

-webkit-font-smoothing: subpixel-antialiased;

ke animasi mereka ke objek. Saya menemukan bahwa itu dapat mengubah render font web tetapi merasa bebas untuk bereksperimen dengan metode itu juga.


49
2018-06-02 00:24



Dari pada

transform: scale(1.5);

menggunakan

zoom : 150%;

memperbaiki masalah blurring teks di Chrome.


9
2018-02-28 19:56



Saya menemukan bahwa menyesuaikan rasio skala membantu sedikit.

Menggunakan scale(1.048) lebih (1.05) tampaknya menghasilkan pendekatan yang lebih baik ke ukuran font keseluruhan piksel, mengurangi pemburaman sub-piksel.

Saya juga digunakan translateZ(0) yang tampaknya menyesuaikan langkah pembulatan akhir Chrome dalam transformasi animasi. Ini adalah nilai tambah untuk penggunaan onhover saya karena meningkatkan kecepatan dan mengurangi gangguan visual. Namun, untuk fungsi onclick, saya tidak akan menggunakannya karena, font yang diubah tidak tampak seperti renyah.


6
2018-02-03 22:46



Sunderls menuntunku pada jawabannya. Kecuali filter: scale tidak ada, tapi filter: blur tidak.

Menerapkan deklarasi berikutnya ke elemen yang tampak buram (dalam kasus saya, mereka berada di dalam elemen yang diubah):

backface-visibility: hidden;    
-webkit-filter: blur(0);

Saya t hampir bekerja dengan sempurna. "Hampir"Karena saya menggunakan transisi dan sementara dalam transisi, elemen tidak terlihat sempurna, tetapi setelah transisi selesai, mereka melakukannya.


5
2017-12-10 18:25



Untuk meningkatkan blurriness, khususnya. di Chrome, coba lakukan ini:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

4
2017-12-05 20:51



Ini harus bug dengan Chrome (Versi 56.0.2924.87), tetapi di bawah ini memperbaiki bluriness untuk saya ketika mengubah properti css di konsol ('. 0'). Saya akan melaporkannya.

filter: blur(.0px)

4
2018-03-31 10:34



Coba gunakan zoom: 101%; untuk desain rumit saat Anda tidak dapat menggunakan kombinasi skala zoom +.


3
2017-09-30 07:17



Dalam kasus saya, kode berikut ini menyebabkan font buram:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

dan hanya menambahkan properti zoom tetap untuk saya. Bermain-main dengan zoom, berikut bekerja untuk saya:

zoom: 97%;   

2
2018-01-04 17:10