Изображение перемещается по hover - проблема непрозрачности хрома

Ответ 1

Другим решением было бы использовать

-webkit-backface-visibility: hidden;

в элементе наведения, который имеет непрозрачность. Охват обратной стороны относится к transform, поэтому @Beskow имеет к этому какое-то отношение. Поскольку это специфическая проблема webkit, вам нужно указать только обратную видимость для webkit. Существуют другие префиксы поставщика.

Подробнее см. http://css-tricks.com/almanac/properties/b/backface-visibility/.

Ответ 2

По какой-то причине Chrome интерпретирует положение элементов без непрозрачности 1 по-другому. Если вы примените атрибут CSS position:relative к вашим элементам a.img, будет больше не двигаться влево/вправо, поскольку их непрозрачность меняется.

Ответ 3

У меня была та же проблема, я исправил ее с помощью css transform rotate. Вот так:

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

Он отлично работает в основных браузерах.

Ответ 4

Мне нужно было применять правила backface-visibility и transform, чтобы предотвратить этот сбой. Вот так:

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}

Ответ 5

Еще одно решение, которое исправило эту проблему, заключалось в том, чтобы добавить правило:

will-change: opacity;

В моем конкретном случае это предотвратило аналогичную проблему с пиксельным прыжком, которая translateZ(0) была введена в Internet Explorer, несмотря на исправление в Chrome.

Большинство других решений, предложенных здесь, которые включают в себя преобразования (например, translateZ(0), rotate(0), translate3d(0px,0px,0px) и т.д.), работают, передавая окраску элемента на GPU, обеспечивая более эффективный рендеринг. will-change дает подсказку браузеру, который предположительно имеет аналогичный эффект (позволяя браузеру более эффективно отображать переход), но чувствует себя менее взломанным (поскольку он явно решает проблему, а не просто подталкивает браузер к использованию графического процессора).

Сказав это, стоит иметь в виду, что поддержка браузера не так хороша для will-change (хотя, если проблема связана с Chrome только тогда это может быть хорошо!), и в некоторых ситуациях он может ввести свои проблемы, но все же это еще одно возможное решение для этот вопрос.

Ответ 6

У меня была аналогичная проблема с фильтрами (непрозрачность) при наведении. Исправлено добавлением правила в базовый класс с помощью:

filter: brightness(1.01);

Ответ 7

обратная видимость (или -webkit-backface-visibility) только фиксировала проблему в Chrome для меня. Для исправления как в Firefox, так и в Chrome я использовал следующую комбинацию ответов.

//fixes image jiggle issue, please do not remove
img {
  -webkit-backface-visibility: hidden; //Webkit fix
  transform: translate3d(0px,0px,0px); //Firefox fix
}

Ответ 8

Я столкнулся с аналогичной проблемой в Safari 8.0.2, где изображения дрожат, когда их непрозрачность переходит. Ни одно исправление, опубликованное здесь, не работает, однако следующее:

-webkit-transform: translateZ(0);

Отметьте этот ответ через этот последующий ответ

Ответ 9

Я столкнулся с этой проблемой с изображениями в сетке, каждое изображение было вложено в тот, который отображался: объявлен встроенный блок. Решение, которое Jamland опубликовал выше, помогло устранить проблему, когда дисплей: inline-block; было объявлено на родительский элемент.

У меня была другая сетка, где изображения были в неупорядоченном списке, и я смог только что объявить отображение: block; и ширину в элементе родительского списка и объявленную обратную видимость: hidden; на элементе изображения и, по-видимому, нет никакого сдвига позиции при наведении.

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }

Ответ 10

У меня были проблемы со всеми другими решениями здесь, так как они требуют изменений в CSS, которые могут нарушать другие вещи - position: relative требует от меня полностью переосмыслить, как я позиционирую свои элементы, transform: rotate (0) can мешать существующим преобразованиям и дает малоприятные эффекты перехода, когда у меня установлен набор длительности перехода, а видимость обратной поверхности не будет работать, если мне когда-либо понадобится обратная сторона (и для этого требуется много префикса).

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

opacity:0.99999999;

Ответ 11

Отметив ответ Рика Гинера как правильный, я узнал, что это не решило проблему.

В моем случае у меня есть обратные изображения ширины, содержащиеся в div max-width. Как только ширина сайта пересекает эту максимальную ширину, изображения перемещаются при наведении (с использованием преобразования css).

Исправление в моем случае состояло в том, чтобы просто изменить максимальную ширину на кратное три, три столбца в этом случае, и он исправил ее отлично.

Ответ 12

В этой проблеме мне было предложено решение alpipego. Используйте -webkit-backface-visibility: hidden; При этом изображение не перемещается в режиме непрозрачности перехода

/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

Ответ 13

Я заметил, что у вас есть прозрачность, включенная в ваш CSS. У меня была такая же проблема с Chrome (изображение перемещалось при наведении). Все, что я делал, это отключить непрозрачность, и она была решена, больше изображений не двигалось.

.yourclass:hover {
  /* opacity: 0.6; */
}