CSS geçiş efekti Chrome'da görüntüyü bulanıklaştırıyor / görüntüyü 1 piksel taşıyor mu?

Fareyle üzerine gelindiğinde, bir CSS geçiş efekti bir div taşıyacak bazı CSS var.

Örnekte görebileceğiniz gibi sorun, translategeçişin div içindeki görüntüyü 1px aşağı / sağa (ve muhtemelen çok küçük bir boyutta yeniden boyutlandırmak?) Yapmak için korkunç bir yan etkiye sahip olmasıdır. odak dışı...

Aksaklık, vurgulu efektin uygulandığı süre boyunca geçerli gibi görünüyor ve deneme yanılma sürecinden güvenli bir şekilde söyleyebilirim ki sadece çeviri geçişi div hareket ettiğinde (kutu gölgesi ve opaklık da uygulanır, ancak hiçbir fark yaratmaz) kaldırıldığında hata).

Sorun yalnızca sayfada kaydırma çubukları olduğunda ortaya çıkıyor. Div'ın yalnızca bir örneğine sahip olan örnek gayet iyi, ancak bir kez daha özdeş div'ler eklendiğinde ve bu nedenle sayfa bir kaydırma çubuğu gerektirdiğinde sorun tekrar karşımıza çıkıyor ...

2020 güncellemesi

• Bulanık görüntülerle ilgili sorun yaşıyorsanız, özellikle image-renderingCSS özelliği gibi yanıtları da aşağıdan kontrol ettiğinizden emin olun .
• En iyi uygulama erişilebilirliği ve SEO akıllıca için, arka plan resmini nesneye uygun CSS özelliğini <img>kullanarak bir etiketle değiştirebilirsiniz .

Orijinal cevap

Bunu CSS'nizde deneyin :

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

Bunun yaptığı şey, bölünmenin "daha 2B" gibi davranmasını sağlamaktır.

• Döndürme ve benzeri şeyleri ters çevirmek için arka yüz varsayılan olarak çizilir. Sadece sola, sağa, yukarı, aşağı, ölçeklendirir veya saat yönünün tersine döndürürseniz buna gerek yoktur.
• Her zaman sıfır değerine sahip olmak için Z eksenini çevirin.
• Şimdi kolları Krom backface-visibilityve transformolmadan -webkit-önek. Şu anda bunun diğer tarayıcı oluşturma (FF, IE) nasıl etkilediğini bilmiyorum, bu yüzden öneksiz sürümleri dikkatli kullanın.

Öğeye 3d dönüşüm uygulamanız gerekir, böylece kendi kompozit katmanını elde eder. Örneğin:

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

veya

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

Burada okuyabileceğiniz katman oluşturma ölçütleri hakkında daha fazla bilgi: Chrome'da Hızlandırılmış İşleme

Bir açıklama:

Örnekler (vurgulu yeşil kutu):

• Sorun: Geçiş, kardeş öğeler üzerinde göz kırpma etkisine neden olabilir (OSx Lion, Chrome 30)
• Çözüm: Kendi kompozit katmanındaki bir eleman

Öğenizde herhangi bir geçiş kullandığınızda, tarayıcının stilleri yeniden hesaplaması, ardından geçiş özelliği görsel olsa bile (örneklerimde bir opaklıktır) içeriğinizi yeniden düzenler ve son olarak bir öğeyi boyar:

Buradaki sorun, geçiş sırasında sayfadaki "dans etmeyi" veya "yanıp sönmeyi" etkileyebilen içeriğin yeniden düzenlenmesi. Ayarlara gidecek olursanız, "Bileşik katmanları göster" onay kutusunu işaretleyin ve bir öğeye 3B dönüştürmeyi uygulayın, turuncu kenarlıkla özetlenen kendi katmanı aldığını göreceksiniz.

Eleman kendi katmanını aldıktan sonra, tarayıcının geçiş sırasında katmanları yeniden düzenlemeden ve hatta boya işlemlerinden geçirmeden birleştirmesi yeterlidir, bu nedenle sorunun çözülmesi gerekir:

Gömülü youtube iframe ile aynı sorun vardı (iframe öğesini ortalamak için Çeviriler kullanıldı). Yukarıdaki çözümlerin hiçbiri, sıfırlama css filtreleri ve sihir gerçekleşene kadar işe yaramadı .

Yapısı:

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

Stil [önce]

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

Stil [sonra]

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

En son tarayıcıda test ettiğim deneysel yeni bir özellik CSS'yi önerdim ve iyi:

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+                */

Bununla tarayıcı, oluşturma algoritmasını bilecek

Bir elementin dönüştürülürken bulanıklaşmasının başka bir nedenini buldum. transform: translate3d(-5.5px, -18px, 0);Bir öğeyi yüklendikten sonra yeniden konumlandırmak için kullanıyordum , ancak bu öğe bulanıklaştı.

Yukarıdaki tüm önerileri denedim ama benim için çeviri değerlerinden biri için ondalık bir değer kullanarak oldu. Tam sayılar bulanıklığa neden olmaz ve tam sayıdan uzaklaştıkça bulanıklık daha da kötüleşti.

yani 5.5pxelemanı en çok, 5.1pxen az bulanıklaştırır .

Kimseye yardım etmesi için burada mırıldanacağımı düşündüm.

Sorunu adım adım kullanarak sorunsuz bir şekilde kandırdım, sorunsuz değil

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

Bir çözüm değil, bir hile ve her yerde uygulanamaz.

Açıklayamıyorum, ama benim için çalışıyor. Başka cevapların hiçbiri bana yardımcı olmaz (OSX, Chrome 63, Retina olmayan ekran).

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

İkiye ölçekleme ve yarıya düşürme zoombenim için çalıştı.

transform: scale(2);
zoom: 0.5;

Yaklaşık 10 olası çözümü denedim. Onları karıştırıp hala düzgün çalışmadılar. Sonunda her zaman 1 piksel sarsıntı vardı.

Filtre üzerindeki geçiş süresini azaltarak çözüm buluyorum.

Bu işe yaramadı:

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

Çözüm:

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

Bunu kemanda deneyin:

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

Umarım bu birine yardımcı olur.

Deneyin filter: blur(0);

Benim için çalıştı

Benim için, şimdi 2018'de. Sorunumu gideren tek şey (fareyle üzerine gelindiğinde bir görüntüden geçen beyaz bir titreme çizgisi) bunu, görüntü öğesini tutan bağlantı öğeme uygulamaktı. 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

Geçiş süresinin değerini .3seşit geçiş zamanlaması adımlarını ayarlayarak yardımcı oldum.3s

Sadece aynı problemi aldım. Benim için çalışan ana öğeye göre konum ayarlamaya çalışın.