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


92

Кажется, здесь проблема с моей страницей: 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;
}

Не двигается для меня дальше22.0.1229.94 m
Дэнни

3
Лучше всего навести курсор на тег A, а не на само изображение.
Диодей - Джеймс Макфарлейн

Да .img - это класс href. Стоит ли дать ему другое имя? может теперь он конфликтует с <img src>? РЕДАКТИРОВАТЬ: Nvm, я изменил имя с .img на .thumb, но проблема не исчезла. Любое другое предложение?
zefs

Вероятно, это то, что делает Fancybox.
Диодей - Джеймс Макфарлейн,

4
использование перевода по оси Z было единственным решением, которое сработало для меня: stackoverflow.com/questions/12502234/…
Ларри

Ответы:


231

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

-webkit-backface-visibility: hidden;

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

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


Это правильный ответ, но вы должны сказать, что backface-visibilityсвойство должно быть установлено для imgэлемента. В моем случае элемент с непрозрачностью был aэлементом, который оборачивает img, поэтому ваш ответ не был идеальным для меня. Кстати, я также обнаружил этот сбой в Firefox для Mac, поэтому я предлагаю использовать префиксы всех поставщиков.
Oliboy50

1
@ Oliboy50 Извините, я должен с этим поспорить. Im мой случай, неисправные элементы были просто пустые divs с background-image. @alpipego Спасибо за решение!
bonflash

1
Это сработало для меня, но мои изображения выглядели плохо, пиксельными, а не гладкими.
Киран Хантер

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

Мне также пришлось добавить, z-indexчтобы эффект зависания работал у меня правильно.
Джек

34

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


1
Кто-нибудь знает, почему это так? Неужели это не hasLayout?
sidonaldson

7
Была такая же проблема в Firefox только что. Relative не исправил это, но установка этого в элементе transform: translate3d(0px,0px,0px);
исправила

У меня была такая же проблема с Safari, и я transform: translate3d(0px,0px,0px);работал
zevnicsca

21

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

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

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


1
Спасибо за это. Это исправлено в Firefox! : D
Hans Wassink

Да, я тоже. У меня не сработал трюк с обратной стороной (изображение внутри a), а вот этот сработал! Благодарность!
mikmikmik

Это единственный ответ, который сработал для меня (Chrome). Благодарность!
Кид Даймонд,

14

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

will-change: opacity;

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

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

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


10

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

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

10

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

filter: brightness(1.01);

Та же проблема с переходом фильтра при наведении курсора. Это исправило это и для меня.
Джош Харрисон

Использование фильтра: яркость (1); в элементе img исправил это для меня, спасибо
Сай,

это сработало для меня, была проблема с 1 пикселем при применении фильтра оттенков серого к изображению при наведении. Почему разработчики браузеров не могут наконец исправить все это? Зачем мне использовать backface-visibility и все такое ...
Варин

Это исправляет, но анимация перехода перестает работать
Амин

6

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
}

4

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

-webkit-transform: translateZ(0);

Вся заслуга в этом ответе через этот последующий ответ


Пробовал все остальные ответы, это был первый, который сработал!

2

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

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

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

2

В этой задаче мне послужило решение 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;

2

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

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

opacity:0.99999999;

1

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

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

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


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

0

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.