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

по какой-то причине Chrome интерпретирует положение элементов без непрозрачности 1 по-другому. Если вы применяете атрибут CSS position:relative для ваших элементов a. 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);

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

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

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

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 не будет работать, если мне когда-либо действительно нужна задняя поверхность (и требует много префиксов.)

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

opacity:0.99999999;

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

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

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

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

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

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