Efekt przejścia CSS sprawia, że obraz jest rozmyty / przesuwa obraz 1px, w Chrome?

Musisz zastosować transformację 3D do elementu, aby otrzymał on własną warstwę kompozytową. Na przykład:

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

Lub

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

Więcej o kryteriach tworzenia warstw można przeczytać tutaj: przyspieszone renderowanie w Chrome

Wyjaśnienie:

Przykłady (podświetlenie zielonego pola):

• Problem: Przejście może powodować efekt mrugnięcia na elementach rodzeństwa (OSx Lion, Chrome 30)
• rozwiązanie: element na jego własna warstwa kompozytowa

Gdy używasz przejścia na swoim elemencie, powoduje to przeliczanie stylów przez przeglądarkę, a następnie ponowne układanie zawartości, nawet jeśli właściwość przejścia jest wizualna (w moich przykładach jest to nieprzezroczystość) i ostatecznie malowanie elementu:

Problem polega na przeprojektowaniu zawartości, która może spowodować efekt "tańczenia " lub" migania " elementów na stronie podczas przejścia. Jeśli przejdziesz do ustawień, zaznacz pole wyboru "Pokaż warstwy kompozytowe" i następnie zastosuj transformację 3D do elementu, zobaczysz, że otrzymuje on własną warstwę, która jest zaznaczona pomarańczową obwódką.

Gdy element otrzyma własną warstwę, przeglądarka musi po prostu złożyć warstwy przy przejściu bez ponownego układu lub nawet operacji malowania, więc problem musi zostać rozwiązany:

Miał ten sam problem z osadzonym iFrame youtube (tłumaczenia były używane do centrowania elementu iframe). Żadne z powyższych rozwiązań nie zadziałało, dopóki nie spróbowano zresetować filtrów css I stało się coś magicznego.

Struktura:

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

Style [before]

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

Style [po]

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

Poleciłem eksperymentalny nowy atrybut CSS, który testowałem na najnowszej przeglądarce i jest dobry:

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

Dzięki temu przeglądarka pozna algorytm renderowania

Try filter: blur(0);

Zadziałało dla mnie

Znalazłem kolejny powód, dla którego element rozmywa się podczas transformacji. Używałem transform: translate3d(-5.5px, -18px, 0); do zmiany pozycji elementu po załadowaniu, jednak element ten stał się rozmyty.

Próbowałem wszystkich powyższych sugestii, ale okazało się, że to przeze mnie używałem wartości dziesiętnej dla jednej z wartości translate. Liczby całkowite nie powodują rozmycia, a im bardziej oddalałem się od liczby całkowitej, tym gorsze było rozmycie.

Tzn. 5.5px rozmywa pierwiastek najbardziej, Najmniej.

Oszukałem problem używając przejścia po krokach, nie płynnie

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

To nie jest rozwiązywanie, to jest oszustwo i może być stosowane nie wszędzie.

Https://jsfiddle.net/tuzae6a9/6/

Skalowanie do podwojenia i sprowadzenie do połowy z zoom zadziałało dla mnie.

transform: scale(2);
zoom: 0.5;

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

Pomogło mi ustawienie wartości czasu przejścia .3s równe kroki czasu przejścia .3s

Próbowałem około 10 możliwych rozwiązań. Pomieszali je i nadal nie działały poprawnie. Zawsze był 1px shake na końcu.

Znajduję rozwiązanie, skracając czas przejścia na filtrze.

To nie działa:

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

Rozwiązanie:

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

Spróbuj tego w fiddle:

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

Dla mnie, teraz w 2018 roku. Jedyną rzeczą, która rozwiązała mój problem (Biała migotliwa linia biegnąca przez obraz po najechaniu kursorem), było zastosowanie tego do mojego elementu łącza trzymającego element obrazu, który ma 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;
}

Po prostu mam ten sam problem. Spróbuj ustawić pozycję: względem elementu nadrzędnego, który mi się sprawdził.