изображение перемещается при наведении-проблема непрозрачности chrome

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

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

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

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

мне было нужно применить оба backface-visibility и transform правила для предотвращения этого глюка. Вот так:

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

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

filter: brightness(1.01);

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

will-change: opacity;

в моем конкретном случае это избежало подобной проблемы с прыжками пикселей, которая translateZ(0) представлен в Internet Explorer, Несмотря на исправление вещей в Chrome.

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

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

backface-visibility (или-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
}

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

-webkit-transform: translateZ(0);

все кредиты ответ via этот последующий ответ

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

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

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

решение 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;

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

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

opacity:0.99999999;

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

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

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

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

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

была та же проблема, мое исправление ставило класс перед src на вкладке img.