görüntü üzerine gelindiğinde hareket ediyor - krom opaklık sorunu

Buradaki sayfamla ilgili bir sorun var gibi görünüyor: http://www.lonewulf.eu

Küçük resimlerin üzerine gelindiğinde, resim biraz sağa doğru hareket eder ve bu yalnızca Chrome'da gerçekleşir.

CSS'im:

.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;
}

Başka bir çözüm kullanmaktır

-webkit-backface-visibility: hidden;

opaklığa sahip fareyle üzerine gelme öğesinde. Arka yüz görünürlüğü ile ilgilidir transform, bu nedenle @Beskow'un bununla bir ilgisi vardır. Webkit'e özgü bir sorun olduğundan, yalnızca webkit için arka yüz görünürlüğünü belirlemeniz gerekir. Başka satıcı önekleri var .

Daha fazla bilgi için http://css-tricks.com/almanac/properties/b/backface-visibility/ adresine bakın .

Bazı nedenlerden dolayı Chrome, 1 opaklığı olmayan öğelerin konumunu farklı bir şekilde yorumlar. CSS özniteliğini position:relativea.img öğelerinize uygularsanız, opaklıkları değiştikçe artık sola / sağa hareket olmayacaktır.

Aynı sorunu yaşadım, css dönüşümü döndürme ile düzelttim. Bunun gibi:

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

Büyük tarayıcılarda iyi çalışıyor.

Bu sorunu benim için çözen bir başka çözüm de kuralı eklemekti:

will-change: opacity;

Benim özel durumumda bu translateZ(0), Chrome'daki sorunları düzeltmesine rağmen, Internet Explorer'da ortaya çıkan benzer bir piksel atlama sorununu önledi .

Diğer çözümlerin çoğu dönüşümleri (örn. İçerdiğini burada önerdi translateZ(0), rotate(0), translate3d(0px,0px,0px)daha verimli bir şekilde sunulmasını sağlayan GPU'ya üzerinde elemanın boyayarak teslim yoluyla, vs) çalışmaları.will-changetarayıcıya muhtemelen benzer bir etkiye sahip olan (tarayıcının geçişi daha verimli bir şekilde oluşturmasına izin veren), ancak daha az hilekarlık hissi veren bir ipucu sağlar (çünkü tarayıcıyı GPU kullanmak için dürtmek yerine sorunu açık bir şekilde ele alır).

Bunu söyledikten sonra, tarayıcı desteğinin o kadar iyi olmadığını akılda tutmakta fayda var will-change(sorun yalnızca Chrome ile ilgiliyse, bu iyi bir şey olabilir!) Ve bazı durumlarda kendi başına sorunları ortaya çıkarabilir , ancak yine de , bu sorun için başka bir olası çözüm.

Hem uygulamak gerekir idi backface-visibilityve transformbu aksaklık önlemek için yönetir. Bunun gibi:

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

Fareyle üzerine gelindiğinde (opaklık olmayan) filtrelerle benzer bir sorun yaşadım. Temel sınıfa bir kural eklenerek düzeltildi:

filter: brightness(1.01);

backface-visibility (veya -webkit-backface-visibility) sorunu yalnızca benim için Chrome'da düzeltti. Hem Firefox hem de Chrome'da düzeltmek için yukarıdaki cevapların aşağıdaki kombinasyonunu kullandım.

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

Safari 8.0.2'de benzer bir sorunla karşılaştım, burada görüntülerin opaklıkları geçtikçe titriyordu. Burada yayınlanan düzeltmelerin hiçbiri işe yaramadı, ancak aşağıdakiler işe yaradı:

-webkit-transform: translateZ(0);

Bu sonraki cevap aracılığıyla bu cevaba tüm itibar

Bu sorunla karşılaştım bir ızgaradaki görüntülerle, her görüntünün bir görüntüye sahip bir içine yerleştirildiği: satır içi blok bildirildi. Jamland'ın yukarıda yayınladığı çözüm, görüntü olduğunda sorunu düzeltmek için çalıştı: satır içi blok; üst öğe üzerinde beyan edildi.

Resimlerin sırasız bir listede olduğu başka bir ızgaram vardı ve sadece display: block; ve üst liste öğesinde bir genişlik ve bildirilen arka yüz görünürlüğü: gizli; resim öğesinde ve üzerine gelindiğinde herhangi bir konum kayması görünmüyor.

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

Çözüm alpipego bana bu problemde hizmet etti. Kullan -webkit-backface-visibility: hidden; Bununla görüntü üzerine gelindiğinde opaklık geçişinde hareket yok

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

Buradaki diğer tüm çözümlerle sorun yaşadım, çünkü bunlar CSS'de başka şeyleri bozabilecek değişiklikler gerektiriyor - konum: göreli, öğelerimi nasıl konumlandırdığımı tamamen yeniden düşünmemi gerektiriyor, dönüştürme: rotate (0) mevcut olana müdahale edebilir Bir geçiş süresi setine sahip olduğumda, küçük geçiş efektlerini dönüştürür ve verir ve arka yüz görünürlüğü, gerçekten bir arka yüze ihtiyacım olursa (ve çok fazla ön ek gerektirir) çalışmaz.

Bulduğum en tembel çözüm, elementimde 1'e çok yakın, ancak tam olmayan bir opaklık ayarlamaktı. Bu sadece opaklık 1 ise bir sorundur, bu yüzden diğer stillerimi kırmayacak veya engellemeyecektir:

opacity:0.99999999;

Rick Giner'ın cevabını doğru olarak işaretledikten sonra sorunun çözülmediğini anladım.

Benim durumumda, bir max-width div içinde bulunan duyarlı genişlikte resimlerim var. Site genişliği bu maksimum genişliği geçtiğinde, görüntüler fareyle üzerine gelindiğinde hareket eder (css dönüşümü kullanılarak).

Benim durumumdaki düzeltme, bu durumda maksimum genişliği basitçe üç, üç sütunun katına değiştirmekti ve mükemmel bir şekilde sabitledi.

CSS'nizde opaklığın bulunduğunu fark ettim. Chrome ile aynı sorunu yaşadım (üzerine gelindiğinde hareket eden görüntü) .. Tek yaptığım opaklığı devre dışı bırakmaktı ve çözüldü, artık görüntü hareket etmiyordu.

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

Aynı sorunu yaşadım, benim düzeltmem sınıfı img sekmesinde src'den önce yerleştirmekti.