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

Здається, є проблема з моєю сторінкою тут: 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;

на елементі наведення, що має непрозорість. Видимість на задньому плані стосується transform, тому @Beskow має щось спільне з цим. Оскільки це специфічна проблема веб-набору, вам потрібно лише вказати видимість задньої поверхні веб-набору. Є й інші префікси постачальників .

Для отримання додаткової інформації див. 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. Рішення, яке опублікував Джамленд, допомогло виправити проблему, коли дисплей: inline-block; було оголошено на батьківському елементі.

У мене була інша сітка, де зображення були в невпорядкованому списку, і я зміг просто оголосити display: block; та ширину батьківського елемента списку та оголошену видимість задньої поверхні: приховано; на елементі зображення, і, здається, ніякого зміщення положення при наведенні.

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.