Teks buram setelah menggunakan CSS transform: scale (); di Chrome

Sepertinya telah ada pembaruan terkini untuk Google Chrome yang menyebabkan teks kabur setelah melakukan transform: scale(). Secara khusus 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 mengunjungi http://rourkery.com di Chrome, Anda akan melihat masalah di area teks utama. Itu tidak digunakan untuk melakukan ini dan sepertinya tidak mempengaruhi browser webkit lain (seperti Safari). Ada beberapa posting lain tentang orang-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!

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

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

backface-visibility: hidden;

TranslateZ juga berfungsi karena ini adalah peretasan untuk menambahkan akselerasi perangkat keras ke animasi.

transform: translateZ(0);

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

-webkit-font-smoothing: subpixel-antialiased;

ke animasi mereka untuk menolak. Saya menemukan bahwa itu dapat mengubah rendering font web tetapi jangan ragu untuk bereksperimen dengan metode itu juga.

Untuk meningkatkan keburaman, esp. di Chrome, coba lakukan ini:

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

PEMBARUAN: Perspektif menambahkan jarak antara pengguna dan bidang-z, yang secara teknis menskalakan objek, membuat keburaman tampak 'permanen'. Di perspective(1px)atas seperti selotip bebek karena kami mencocokkan kekaburan yang coba kami selesaikan. Anda mungkin lebih beruntung dengan css di bawah ini:

transform: translateZ(0);
backface-visibility: hidden;

Saya menemukan bahwa menyesuaikan rasio skala sedikit membantu.

Menggunakan scale(1.048)over (1.05)tampaknya menghasilkan perkiraan yang lebih baik untuk ukuran font piksel utuh, mengurangi keburaman sub-piksel.

Saya juga menggunakan translateZ(0)yang tampaknya menyesuaikan langkah pembulatan terakhir Chrome dalam animasi transformasi. 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 tampaknya tidak terlalu tajam.

Setelah mencoba segala sesuatu yang lain di sini dengan tidak beruntung, apa yang akhirnya tetap masalah ini bagi saya adalah menghapus yang will-change: transform;properti. Untuk beberapa alasan, hal itu menyebabkan penskalaan yang tampak sangat kabur di Chrome, tetapi tidak di Firefox.

Dari pada

transform: scale(1.5);

menggunakan

zoom : 150%;

memperbaiki masalah pemburaman teks di Chrome.

Ini pasti bug dengan Chrome (Versi 56.0.2924.87), tetapi di bawah ini memperbaiki keburaman bagi saya saat mengubah properti css di konsol ('. 0'). Saya akan melaporkannya.

filter: blur(.0px)

Sunderls menuntun saya pada jawabannya. Kecuali filter: scaletidak ada, tapi filter: blurada.

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

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

Ini hampir bekerja dengan sempurna. " Hampir " karena saya menggunakan transisi dan saat dalam transisi, elemen tidak terlihat sempurna, tetapi begitu transisi selesai, mereka melakukannya.

Saya menemukan, bahwa masalah terjadi pada transformasi relatif dengan cara apa pun. translateX (50%), scale (1.1) atau apa pun. memberikan nilai absolut selalu berhasil (tidak menghasilkan teks buram (ures)).

Tidak ada solusi yang disebutkan di sini yang berfungsi, dan saya pikir belum ada solusi (menggunakan Chrome 62.0.3202.94 saat saya menulis ini).

Dalam kasus saya transform: translateY(-50%) translateX(-50%)menyebabkan blur (saya ingin memusatkan dialog).

Untuk mencapai nilai yang lebih "absolut", saya harus menetapkan nilai desimal ke transform: translateY(-50.09%) translateX(-50.09%).

CATATAN

Saya cukup yakin, nilai ini bervariasi pada ukuran layar yang berbeda. Saya hanya ingin berbagi pengalaman saya, jika itu membantu seseorang.

Saya telah menemukan solusi yang jauh lebih baik dan bersih:

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

atau

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

Terima kasih untuk posting ini: Mencegah rendering buram dengan transform: scale

Menambahkan perspective(1px)berhasil untuk saya.

transform: scale(1.005);

untuk

transform: scale(1.005) perspective(1px);

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

Dalam kasus saya, kode berikut menyebabkan font buram:

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

dan hanya menambahkan properti zoom sudah memperbaikinya untuk saya. Bermain-main dengan zoom, berikut ini berhasil untuk saya:

zoom: 97%;   

Perbaikan lain untuk dicoba yang baru saja saya temukan untuk blurry transforms (translate3d, scaleX) di Chrome adalah dengan menyetel elemen sebagai " display: inline-table ;". Tampaknya memaksa pembulatan piksel dalam beberapa kasus (pada sumbu X).

Saya membaca pemosisian subpiksel di bawah Chrome dimaksudkan dan pengembang tidak akan memperbaikinya.

Pembaruan 2019
Bug tampilan Chrome masih belum diperbaiki dan meskipun bukan karena kesalahan pelanggan, tidak ada saran yang ditawarkan di keseluruhan situs web ini yang membantu menyelesaikan masalah. Saya setuju bahwa saya telah mencoba semuanya dengan sia-sia: hanya 1 yang mendekati dan itulah aturan css: filter: blur (0); yang menghilangkan pergeseran penampung sebesar 1px tetapi tidak menyelesaikan bug tampilan buram dari penampung itu sendiri dan konten apa pun yang dimilikinya.

Inilah kenyataannya: secara harfiah tidak ada perbaikan untuk masalah ini jadi berikut adalah solusi untuk situs web fluid

CASE
Saat ini saya sedang mengembangkan situs web fluid dan memiliki 3 div, semuanya berpusat dengan efek hover dan berbagi nilai persentase baik dalam lebar maupun posisinya. Bug Chrome terjadi di penampung tengah yang disetel ke kiri: 50%; dan transform: translateX (-50%); pengaturan umum.

CONTOH: Pertama HTML ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Inilah CSS tempat bug Chrome terjadi ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Inilah css yang diperbaiki ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Biola yang disadap: https://jsfiddle.net/m9bgrunx/2/
Biola tetap: https://jsfiddle.net/uoc6e2dm/2/

Seperti yang Anda lihat, sejumlah kecil penyesuaian pada CSS akan mengurangi atau menghilangkan persyaratan untuk menggunakan transformasi untuk pemosisian. Ini juga dapat berlaku untuk situs web dengan lebar tetap serta dapat berubah-ubah.

Saya memiliki masalah yang sama. Saya memperbaikinya menggunakan:

.element {
  display: table
}

Tak satu pun di atas berhasil untuk saya. Saya memiliki animasi ini untuk popup:

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

Dalam kasus saya, efek buram hilang setelah menerapkan aturan ini: -webkit-perspective: 1000;meskipun itu ditandai sebagai tidak digunakan di inspektur Chrome.

Solusi saya adalah:

tampilan: awal;

Kemudian renyah tajam

Semua hal di atas tidak berhasil untuk saya.

Ini berhasil ketika saya menambahkan perspektif

yaitu dari

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

saya berubah menjadi

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

Saya memperbaiki kasus saya dengan menambahkan:

transform: perspective(-1px)

UNTUK CHORME:

Saya sudah mencoba semua saran di sini. Tapi tidak berhasil. Perguruan tinggi saya menemukan solusi hebat, yang bekerja lebih baik:

Anda TIDAK harus melewati 1.0

Dan sertakan translateZ(0)di hover tetapi BUKAN di posisi none-hover / awal.

Contoh:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

Saya menggunakan kombinasi dari semua jawaban dan inilah yang pada akhirnya berhasil untuk saya:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

Saya menghadapi masalah teks buram di Chrome tetapi tidak di Firefox saat saya menggunakan transform: translate(-50%,-50%).

Ya, saya benar-benar mencoba banyak solusi seperti:

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

Tak satu pun dari ini berhasil bagi saya.

Akhirnya, saya membuat tinggi dan lebar elemen itu rata. Itu menyelesaikan masalah untuk saya !!!

Catatan: Ini mungkin tergantung dari kasus penggunaan ke kasus penggunaan. Tapi pasti patut dicoba!

Saya telah mencoba banyak contoh dari jawaban ini sayangnya tidak ada bantuan untuk Chrome yang Version 81.0.4044.138 telah saya tambahkan untuk mengubah elemen

 transform-origin: 50% 50%;

yang ini

 transform-origin: 51% 51%;

itu membantu saya

Bagi saya masalahnya adalah elemen saya menggunakan transformStyle: preserve-3d. Saya menyadari bahwa ini sebenarnya tidak diperlukan untuk aplikasi dan menghapusnya memperbaiki keburaman.

Saya menghapus ini dari kode saya - transform-style: preserve-3d; dan menambahkan ini-transform: perspective(1px) translateZ(0);

keburaman hilang!

Di Chrome 74.0.3729.169, yang berlaku mulai tanggal 5-25-19, tampaknya tidak ada perbaikan untuk pengaburan yang terjadi pada tingkat zoom browser tertentu yang disebabkan oleh transformasi. Bahkan yang sederhana TransformY(50px)akan mengaburkan elemen tersebut. Ini tidak terjadi di versi Firefox, Edge atau Safari saat ini, dan sepertinya tidak terjadi di semua tingkat zoom.

Ini akan sulit diselesaikan hanya dengan css.

Jadi saya menyelesaikannya dengan jquery.

Ini CSS saya.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

dan ini jquery saya.

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}

Hanya untuk menambah kegemaran memperbaiki, meletakkan {border: 1px solid # ???} di sekitar objek yang tampak buruk memperbaiki masalah bagi saya. Jika Anda memiliki warna latar belakang yang stabil, pertimbangkan ini juga. Ini sangat bodoh sehingga tidak ada yang berpikir untuk menyebutkannya, ya, eh.

Anda dapat menggunakan css filteruntuk memperbaikinya.

.element {
    filter: blur(0);
}

tentang awalan vendor, lakukan sendiri. -webkit-filter, -ms-filter. detailnya ada di sini http://browser.colla.me/show/css_transformation_scale_cause_blurring

Teks tidak akan kabur jika Anda tidak transitionyang transform.

Lakukan saja ini:

&:hover {
    transform: scale(1.1);
}

Tanpa transisi suka transition: all .2s;