Ефект переходу CSS робить зображення розмитим / переміщує зображення на 1px в Chrome?

У мене є CSS, що після наведення ефекту переходу CSS буде переміщено діл.

Проблема, як ви бачите в прикладі, полягає в тому, що translateперехід має жахливий побічний ефект - змусити зображення в діві рухатись на 1px вниз / вправо (і, можливо, змінювати розмір коли-небудь так трохи?), Щоб воно з'явилося поза місцем і поза увагою ...

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

Здається, проблема виникає лише тоді, коли на сторінці є смуги прокрутки. Отже, приклад із лише одним екземпляром 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".

• Backface малюється за замовчуванням, щоб дозволити гортати речі з обертанням тощо. У цьому немає необхідності, якщо ви рухаєтеся лише вліво, вправо, вгору, вниз, масштабуйте або обертаєте (проти -) за годинниковою стрілкою.
• Перекладіть вісь Z так, щоб вона завжди мала нульове значення.
• Зараз Chrome обробляє 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)
• Рішення: Елемент на власному складеному шарі

Коли ви використовуєте будь-який перехід на своєму елементі, це змушує браузер перерахувати стилі, а потім переплануйте вміст, навіть якщо властивість переходу є візуальною (у моїх прикладах це непрозорість) і остаточно намалюйте елемент:

Проблема тут полягає в переплануванні вмісту, який може зробити ефект "танцюючих" або "блимаючих" елементів на сторінці під час переходу. Якщо ви перейдете до налаштувань, поставте прапорець "Показати складені шари", а потім застосуйте 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+                */

З цим браузер дізнається алгоритм візуалізації

Щойно знайшов ще одну причину, чому елемент перетворюється розмито при трансформації. Я використовував 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;

Я спробував близько 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

Просто отримала таку ж проблему. Спробуйте встановити позицію: відносно батьківського елемента, який працював на мене.