Перемещение изображения при наведении: решение проблемы непрозрачности в Chrome

Пользователи сообщают о проблеме, когда изображения слегка смещаются вправо при наведении, но только в Chrome. Эта проблема возникает из-за использования непрозрачности для управления прозрачностью изображения.

Проверка CSS

Чтобы исследовать проблему, мы проверяем предоставленный 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 для элементов при наведении с непрозрачностью. Это свойство влияет на то, как отображается задняя грань элемента при преобразовании. В этом случае он устраняет непреднамеренное движение, вызванное изменениями непрозрачности в Chrome.

Примените следующее свойство к состоянию наведения:

-webkit-backface-visibility: hidden;

Дополнительные соображения

Свойство -webkit-backface-visibility специфично для браузеров WebKit, поэтому вам могут потребоваться префиксы поставщиков для других движков. Более подробную информацию можно найти в документации CSS-Tricks.