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

Обновление 2020

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

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

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

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

Это заставляет разделение вести себя более 2D.

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

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

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

or

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

Попробуйте filter: blur(0);

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

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

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

Это не сработало:

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

Ничего из этого не сработало, у меня сработало уменьшение изображения.

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

.ok {
      transform: perspective(100px) rotateY(0deg) scale(0.5);
      transition: transform 1s;
      object-fit:contain;
}
.ok:hover{
      transform: perspective(100px) rotateY(-10deg) scale(0.5);
}

/* Demo Preview Stuff */
.bad {
   max-width: 320px;
   object-fit:contain;
   transform: perspective(100px) rotateY(0deg);
   transition: transform 1s;
}
.bad:hover{
      transform: perspective(100px) rotateY(-10deg);
}

div {
     text-align: center;
     position: relative;
     display: flex;
}
h3{
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
}
     
.b {
    display: flex;
}

<center>
<h2>Hover on images</h2>
<div class="b">
<div>
  <img class="ok" src='https://www.howtogeek.com/wp-content/uploads/2018/10/preview-11.png'>
  <h3>Sharp</h3>
</div>

<div>
  <img class="bad" src='https://www.howtogeek.com/wp-content/uploads/2018/10/preview-11.png'>
  <h3>Blurry</h3>
</div>

</div>

</center>

Изображение должно быть уменьшено, убедитесь, что у вас большое разрешение изображения.

У меня была аналогичная проблема с размытым текстом, но затронула только следующий div. По какой-то причине следующий div после того, в котором я выполнял преобразование, был размытым.

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

Если кто-то знает, почему, просто дайте мне знать.

#before
<header class="container">
      <div class="transformed div">
          <span class="transform wrapper">
            <span class="transformed"></span>
            <span class="transformed"></span>
          </span>
       </div>
       <div class="affected div">
       </div>
     </header>

#after
<header class="container">
   <div class="affected div">
   </div>
  <div class="transformed div">
      <span class="transform wrapper">
        <span class="transformed"></span>
        <span class="transformed"></span>
      </span>
   </div>

 </header>

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

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