gambar bergerak saat melayang - masalah opasitas chrome

Sepertinya ada masalah dengan halaman saya di sini: http://www.lonewulf.eu

Saat mengarahkan kursor ke gambar kecil, gambar bergerak sedikit ke kanan, dan itu hanya terjadi di Chrome.

Css saya:

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

Solusi lain adalah menggunakan

-webkit-backface-visibility: hidden;

pada elemen hover yang memiliki opacity. Visibilitas ke belakang berkaitan dengan transform, jadi @Beskow ada hubungannya dengan itu. Karena ini adalah masalah khusus webkit, Anda hanya perlu menentukan visibilitas ke belakang untuk webkit. Ada lainnya prefiks vendor .

Lihat http://css-tricks.com/almanac/properties/b/backface-visibility/ untuk info lebih lanjut.

Untuk beberapa alasan Chrome menafsirkan posisi elemen tanpa opasitas 1 dengan cara yang berbeda. Jika Anda menerapkan atribut CSS position:relativeke elemen a.img Anda, tidak akan ada lagi gerakan kiri / kanan karena opasitasnya bervariasi.

Saya memiliki masalah yang sama, saya memperbaikinya dengan css transform rotate. Seperti ini:

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

Ini berfungsi dengan baik di browser utama.

Solusi lain yang memperbaiki masalah ini bagi saya adalah menambahkan aturan:

will-change: opacity;

Dalam kasus khusus saya, ini menghindari masalah lompatan piksel serupa yang translateZ(0)diperkenalkan di Internet Explorer, meskipun memperbaiki hal-hal di Chrome.

Sebagian besar solusi lain disarankan di sini yang melibatkan transformasi (misalnya. translateZ(0), rotate(0), translate3d(0px,0px,0px), Dll) bekerja dengan menyerahkan lukisan dari elemen ke GPU, yang memungkinkan render lebih efisien.will-changememberikan petunjuk ke browser yang mungkin memiliki efek serupa (memungkinkan browser untuk melakukan transisi dengan lebih efisien), tetapi terasa kurang hacky (karena ini secara eksplisit menangani masalah daripada hanya mendorong browser untuk menggunakan GPU).

Karena itu, perlu diingat bahwa dukungan browser tidak sebaik will-change(meskipun jika masalahnya hanya pada Chrome maka ini mungkin hal yang baik!), Dan dalam beberapa situasi hal itu dapat menimbulkan masalah sendiri , tetapi tetap saja , ini adalah solusi lain yang mungkin untuk masalah ini.

Saya perlu menerapkan keduanya backface-visibilitydan transformaturan untuk mencegah kesalahan ini. Seperti ini:

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}

Saya memiliki masalah serupa dengan filter (non-opacity) pada hover. Diperbaiki dengan menambahkan aturan ke kelas dasar dengan:

filter: brightness(1.01);

backface-visibility (atau -webkit-backface-visibility) hanya memperbaiki masalah di Chrome untuk saya. Untuk memperbaiki di Firefox dan Chrome saya menggunakan kombinasi jawaban di atas berikut.

//fixes image jiggle issue, please do not remove
img {
  -webkit-backface-visibility: hidden; //Webkit fix
  transform: translate3d(0px,0px,0px); //Firefox fix
}

Saya mengalami masalah serupa di Safari 8.0.2, di mana gambar akan bergetar saat opasitasnya dialihkan. Tidak ada perbaikan yang diposting di sini yang berfungsi, namun hal berikut berhasil:

-webkit-transform: translateZ(0);

Semua kredit untuk jawaban ini melalui jawaban berikut ini

Saya mengalami masalah ini dengan gambar dalam kisi setiap gambar bersarang di layar yang memiliki: blok sebaris dinyatakan. Solusi yang diposting Jamland di atas berfungsi untuk memperbaiki masalah saat tampilan: inline-block; dideklarasikan pada elemen induk.

Saya memiliki kisi lain di mana gambar berada dalam daftar yang tidak berurutan dan saya hanya dapat menyatakan display: block; dan lebar pada item daftar induk dan menyatakan backface-visibility: hidden; pada elemen gambar dan sepertinya tidak ada pergeseran posisi saat mengarahkan kursor.

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }

Solusi alpipego melayani saya dalam masalah ini. Gunakan -webkit-backface-visibility: hidden; Dengan ini gambar tidak bergerak dalam transisi opacity hover

/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

Saya mengalami masalah dengan semua solusi lain di sini, karena mereka memerlukan perubahan pada CSS yang dapat merusak hal-hal lain - position: relative mengharuskan saya untuk sepenuhnya memikirkan kembali bagaimana saya memposisikan elemen saya, transform: rotate (0) dapat mengganggu yang ada mengubah dan memberikan efek transisi kecil yang miring ketika saya memiliki set durasi transisi, dan visibilitas belakang tidak akan berfungsi jika saya benar-benar membutuhkan tampilan belakang (dan memerlukan banyak awalan.)

Solusi paling malas yang saya temukan adalah menyetel opacity pada elemen saya yang sangat dekat dengan, tetapi tidak cukup, 1. Ini hanya masalah jika opacity 1, jadi tidak akan merusak atau mengganggu gaya saya yang lain:

opacity:0.99999999;

Setelah menandai jawaban Rick Giner sebagai benar, saya kemudian menemukan bahwa itu tidak memperbaiki masalah.

Dalam kasus saya, saya memiliki gambar lebar responsif yang terkandung dalam div lebar maksimal. Setelah lebar situs melewati lebar maksimal itu, gambar bergerak saat melayang (menggunakan transformasi css).

Perbaikan dalam kasus saya adalah dengan hanya mengubah lebar maksimal menjadi kelipatan tiga, tiga kolom dalam kasus ini, dan itu memperbaikinya dengan sempurna.

Saya perhatikan Anda memiliki opacity yang disertakan dalam CSS Anda. Saya memiliki masalah yang persis sama dengan Chrome (gambar bergerak saat melayang) .. yang saya lakukan hanyalah menonaktifkan opacity dan itu diselesaikan, tidak ada lagi gambar yang bergerak.

.yourclass:hover {
  /* opacity: 0.6; */
}

Memiliki masalah yang sama, Perbaikan saya adalah meletakkan kelas sebelum src di tab img.