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

Кажется, здесь проблема с моей страницей: http://www.lonewulf.eu

При наведении курсора на миниатюры изображение немного сдвигается вправо, и это происходит только в Chrome.

Мой css:

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

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

-webkit-backface-visibility: hidden;

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

См. Http://css-tricks.com/almanac/properties/b/backface-visibility/ для получения дополнительной информации.

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

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

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

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

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

will-change: opacity;

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

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

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

Я должен применяться как backface-visibilityи transformправила , чтобы предотвратить этот глюк. Как это:

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

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

filter: brightness(1.01);

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

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

opacity:0.99999999;

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

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

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

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

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

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