Bildbewegung beim Hover: Behebung des Deckkraftproblems in Chrome

Benutzer haben ein Problem gemeldet, bei dem sich Bilder beim Hover leicht nach rechts bewegen. aber nur in Chrome. Dieses Problem entsteht durch die Verwendung der Deckkraft zur Steuerung der Bildtransparenz.

Überprüfen des CSS

Um das Problem zu untersuchen, untersuchen wir das bereitgestellte 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;
}

Lösung des Problems

Eine alternative Lösung besteht in der Verwendung der Eigenschaft -webkit-backface-visibility für die Hover-Elemente mit Deckkraft. Diese Eigenschaft beeinflusst, wie die Rückseite des Elements bei der Transformation gerendert wird. In diesem Fall wird die unbeabsichtigte Bewegung behoben, die durch Deckkraftänderungen in Chrome verursacht wird.

Wenden Sie die folgende Eigenschaft auf den Hover-Status an:

-webkit-backface-visibility: hidden;

Zusätzliche Überlegungen

Die Eigenschaft -webkit-backface-visibility ist spezifisch für WebKit-Browser, daher benötigen Sie möglicherweise Herstellerpräfixe für andere Engines. Ausführlichere Informationen finden Sie in der CSS-Tricks-Dokumentation.