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

У меня есть немного CSS, который при наведении, эффект перехода CSS будет перемещать div.

Проблема, как вы можете видеть в этом примере, заключается в том, что translateпереход имеет ужасный побочный эффект: изображение в div перемещается на 1 пиксель вниз / вправо (и, возможно, немного изменить размер?), Так что оно выглядит неуместным и не в фокусе...

Похоже, что сбой возникает все время, когда применяется эффект наведения, и из процесса проб и ошибок я могу с уверенностью сказать, что он возникает только тогда, когда переход с переводом перемещает div (тень от блока и непрозрачность также применяются, но не имеют значения для ошибка при удалении).

Проблема возникает только тогда, когда на странице есть полосы прокрутки. Таким образом, пример только с одним экземпляром div подходит, но как только добавляются идентичные div, и поэтому странице требуется полоса прокрутки, проблема снова возникает ...

Обновление 2020

• Если у вас есть проблемы с размытыми изображениями, обязательно проверьте ответы ниже, особенно image-renderingсвойство CSS.
• Для лучшей доступности и оптимизации SEO вы можете заменить фоновое изображение <img>тегом, используя CSS -объектное свойство.

Оригинальный ответ

Попробуйте это в своем CSS :

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

То, что это делает, заставляет подразделение вести себя «более 2D».

• Задняя поверхность рисуется по умолчанию, чтобы можно было переворачивать объекты с помощью rotate и тому подобное. В этом нет необходимости, если вы двигаетесь влево, вправо, вверх, вниз, масштабируете или поворачиваете (против) по часовой стрелке.
• Переведите ось Z, чтобы всегда иметь нулевое значение.
• Хром теперь обрабатывает backface-visibilityи transformбез -webkit-префикса. В настоящее время я не знаю, как это влияет на рендеринг других браузеров (FF, IE), поэтому используйте версии без префиксов с осторожностью.

Вам нужно применить 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)
• Решение: элемент на его собственном составном слое

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

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

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

Была такая же проблема с встраиваемым 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+                */

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

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

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

т.е. 5.5pxразмывает элемент больше всего, 5.1pxменьше всего.

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

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

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

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

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

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

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

transform: scale(2);
zoom: 0.5;

Я пробовал около 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>

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

Пытаться filter: blur(0);

У меня сработало

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

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

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