Эффект перехода CSS делает изображение размытым / перемещает изображение 1px, в Chrome?

вам нужно применить 3d-преобразование к элементу, чтобы он получил свой собственный составной слой. Например:

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

или

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

подробнее о критериях создания слоев вы можете прочитать здесь:ускоренный рендеринг в Chrome

---

объяснение:

примеры (наведите зеленое поле):

• проблема: переход может вызвать эффект мигания на элементах-братьях (OSx Lion, Chrome 30)
• решение: элемент на собственном композитном слое

когда вы используете какой-либо переход на свой элемент, это заставляет браузер пересчитывать стили, а затем переформатировать содержимое, даже если свойство перехода является визуальным (в моих примерах это непрозрачность) и, наконец, нарисовать элемент:

проблема здесь заключается в повторном макете контента, который может создать эффект "танцующих" или "мигающих" элементов на экране. страница во время перехода происходит. Если вы перейдете в настройки, установите флажок" Показать составные слои", а затем примените 3d-преобразование к элементу, вы увидите, что он получает свой собственный слой, который выделен оранжевой границей.

после того, как элемент получает свой собственный слой, браузеру просто нужно составить слои при переходе без повторной компоновки или даже операций рисования, поэтому проблема должна быть решена:

была такая же проблема с встроенным iframe youtube (переводы использовались для центрирования элемента iframe). Ни одно из решений выше не работало, пока не попробовал сброс css фильтров и волшебство произошло.

структура:

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

стиль [перед]

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

стиль [после]

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

я рекомендовал экспериментальный новый атрибут CSS, который я тестировал в последнем браузере, и это хорошо:

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

при этом браузер будет знать алгоритм рендеринга

попробовать filter: blur(0);

это сработало для меня

просто нашел еще одну причину, почему элемент становится размытым при преобразовании. Я использовал transform: translate3d(-5.5px, -18px, 0); чтобы переместить элемент после его загрузки, однако этот элемент стал размытым.

я попробовал все предложения, но оказалось, что это было из-за меня, используя десятичное значение для одного из значений перевода. Целые числа не вызывают размытия, и чем дальше я уходил от целого числа, тем хуже становилось размытие.

т. е. 5.5px стирает элемент самый,5.1px меньше.

просто подумал, что я бы бросил это здесь, если это кому-нибудь поможет.

Я обманул проблему, используя переход по шагам, а не гладко

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

Это не решение, это обман и может применяться не везде.

Я не могу это объяснить, но это работает для меня. Ни один из других ответов не помогает мне (OSX, Chrome 63, дисплей без сетчатки).

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

масштабирование в два раза и доведение до половины с zoom работал для меня.

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

мне помогла установка значения длительности перехода .3s равные шаги синхронизации перехода .3s

Я пробовал около 10 возможных решений. Перепутали их, и они все еще не работали правильно. Там всегда было 1px встряхнуть в конце.

Я нахожу решение путем уменьшения времени перехода на фильтре.

это не работает:

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

устранение:

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

попробуйте это в скрипку:

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

Я надеюсь, что это поможет кому-то.

для меня, теперь в 2018 году. Единственное, что исправило мою проблему (белая линия glitchy-flicker, проходящая через изображение при наведении), применяло это к моему элементу link, содержащему элемент image, который имеет 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;
}

только что получил ту же проблему. Попробуйте установить положение: относительно родительского элемента, который работал для меня.