Efek transisi CSS membuat gambar buram / memindahkan gambar 1px, di Chrome?

Saya punya beberapa CSS yang di hover, efek transisi CSS akan menggerakkan div.

Masalahnya, seperti yang Anda lihat dalam contoh, adalah bahwa translatetransisi memiliki efek samping yang mengerikan dari membuat gambar dalam div bergerak dengan 1px ke bawah / kanan (dan mungkin mengubah ukuran sedikit sekali?) Sehingga tampak tidak pada tempatnya dan tidak fokus...

Kesalahan tampaknya berlaku sepanjang waktu efek hover diterapkan, dan dari proses coba-coba saya dapat dengan aman mengatakan hanya tampaknya terjadi ketika transisi translate memindahkan div (bayangan kotak dan opacity juga diterapkan tetapi tidak ada bedanya untuk kesalahan saat dihapus).

Masalahnya hanya terjadi ketika halaman memiliki scrollbar. Jadi contoh dengan hanya satu contoh div baik-baik saja, tetapi sekali lagi div identik diidentifikasi dan karena itu halaman memerlukan scrollbar masalah muncul lagi ...

Pembaruan tahun 2020

• Jika Anda memiliki masalah dengan gambar buram, pastikan untuk memeriksa jawaban dari bawah juga, terutama image-renderingproperti CSS.
• Untuk aksesibilitas praktik terbaik dan SEO, Anda dapat mengganti gambar latar belakang dengan <img>tag menggunakan properti CSS sesuai objek .

Jawaban asli

Coba ini di CSS Anda :

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

Apa yang dilakukan adalah membuat divisi berperilaku "lebih 2D".

• Backface digambar sebagai default untuk memungkinkan membalik benda dengan rotate dan semacamnya. Tidak perlu jika Anda hanya bergerak ke kiri, kanan, atas, bawah, skala atau putar (berlawanan arah jarum jam).
• Menerjemahkan sumbu Z untuk selalu memiliki nilai nol.
• Chrome sekarang menangani backface-visibilitydan transformtanpa -webkit-awalan. Saat ini saya tidak tahu bagaimana ini mempengaruhi rendering browser lain (FF, IE), jadi gunakan versi yang tidak diawali dengan hati-hati.

Anda perlu menerapkan transformasi 3d ke elemen, sehingga akan mendapatkan lapisan kompositnya sendiri. Misalnya:

.element{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

atau

.element{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

Lebih lanjut tentang kriteria pembuatan lapisan, Anda dapat membaca di sini: rendering yang dipercepat di Chrome

Sebuah penjelasan:

Contoh (arahkan kotak hijau):

• Masalah: Transisi dapat menyebabkan efek kedip pada elemen saudara kandung (OSx Lion, Chrome 30)
• Solusi: Unsur pada lapisan kompositnya sendiri

Ketika Anda menggunakan transisi apa pun pada elemen Anda itu menyebabkan browser untuk menghitung ulang gaya, kemudian tata ulang konten Anda bahkan jika properti transisi adalah visual (dalam contoh saya itu adalah opacity) dan akhirnya cat elemen:

Masalahnya di sini adalah tata letak ulang konten yang dapat membuat efek elemen "menari" atau "berkedip" pada halaman saat transisi terjadi. Jika Anda akan pergi ke pengaturan, centang kotak "Tampilkan lapisan komposit" dan kemudian menerapkan transformasi 3d ke elemen, Anda akan melihat bahwa itu mendapatkan lapisan itu sendiri yang diuraikan dengan batas oranye.

Setelah elemen mendapatkan lapisannya sendiri, browser hanya perlu lapisan komposit pada transisi tanpa tata letak ulang atau bahkan operasi cat sehingga masalah harus dipecahkan:

Punya masalah yang sama dengan iframe youtube embeded (Terjemahan digunakan untuk memusatkan elemen iframe). Tak satu pun dari solusi di atas bekerja sampai mencoba mengatur ulang filter css dan keajaiban terjadi.

Struktur:

<div class="translate">
     <iframe/>
</div>

Gaya [sebelum]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

Gaya [setelah]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  filter: blur(0);
  -webkit-filter: blur(0);
}

Saya merekomendasikan CSS atribut baru eksperimental yang saya uji pada browser terbaru dan bagus:

image-rendering: optimizeSpeed;             /*                     */
image-rendering: -moz-crisp-edges;          /* Firefox             */
image-rendering: -o-crisp-edges;            /* Opera               */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast;         /* CSS3 Proposed       */
-ms-interpolation-mode: nearest-neighbor;   /* IE8+                */

Dengan ini browser akan mengetahui algoritma untuk rendering

Baru saja menemukan alasan lain mengapa suatu elemen menjadi buram ketika diubah. Saya menggunakan transform: translate3d(-5.5px, -18px, 0);untuk memposisikan ulang elemen setelah elemen dimuat, namun elemen itu menjadi buram.

Saya mencoba semua saran di atas tetapi ternyata itu karena saya menggunakan nilai desimal untuk salah satu nilai terjemahan. Seluruh angka tidak menyebabkan keburaman, dan semakin jauh saya pergi dari seluruh nomor semakin buruk menjadi kabur.

yaitu 5.5pxmengaburkan elemen paling banyak, paling 5.1pxsedikit.

Hanya berpikir saya akan membuang ini di sini kalau-kalau itu membantu siapa pun.

Saya menipu masalah menggunakan transisi dengan langkah-langkah, tidak lancar

transition-timing-function: steps(10, end);

Ini bukan penyelesaian, itu curang dan tidak bisa diterapkan di mana-mana.

Saya tidak bisa menjelaskannya, tetapi itu berhasil untuk saya. Tidak ada jawaban lain yang membantu saya (OSX, Chrome 63, tampilan Non-Retina).

https://jsfiddle.net/tuzae6a9/6/

Menskala untuk menggandakan dan menurunkan hingga setengah dengan zoomberhasil bagi saya.

transform: scale(2);
zoom: 0.5;

Saya sudah mencoba sekitar 10 kemungkinan solusi. Menggabungkan mereka dan mereka masih tidak berfungsi dengan benar. Selalu ada shake 1px di akhir.

Saya menemukan solusi dengan mengurangi waktu transisi pada filter.

Ini tidak berhasil:

.elem {
  filter: blur(0);
  transition: filter 1.2s ease;
}
.elem:hover {
  filter: blur(7px);
}

Larutan:

.elem {
  filter: blur(0);
  transition: filter .7s ease;
}
.elem:hover {
  filter: blur(7px);
}

Coba ini di biola:

.blur {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: #f0f;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .7s ease-out;
  /* transition: all .2s ease-out; */
}
.blur:hover {
  -webkit-filter: blur(0);
}

.blur2 {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: tomato;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .2s ease-out;
}
.blur2:hover {
  -webkit-filter: blur(0);
}

<div class="blur"></div>

<div class="blur2"></div>

Saya harap ini membantu seseorang.

Mencoba filter: blur(0);

Ini berhasil untuk saya

Bagi saya, sekarang pada tahun 2018. Satu-satunya hal yang memperbaiki masalah saya (garis glicky-flicker putih yang berjalan melalui gambar di hover) menerapkan ini ke elemen tautan saya yang memegang elemen gambar yang memiliki transform: scale(1.05)

a {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
   transform: translateZ(0) scale(1.0, 1.0);
   -webkit-filter: blur(0);
   filter: blur(0);
}
a > .imageElement {
   transition: transform 3s ease-in-out;
}

filter: blur(0)
transition: filter .3s ease-out
transition-timing-function: steps(3, end) // add this string with steps equal duration

Saya terbantu dengan mengatur nilai durasi .3stransisi sama dengan langkah waktu transisi.3s

Baru saja mendapat masalah yang sama. Cobalah untuk mengatur posisi: relatif terhadap elemen induk, yang bekerja untuk saya.