Warum verschiebt sich mein Bild beim Schweben in Chrome nach rechts?

Bildbewegung beim Hover in Chrome: Deckkraftprobleme beheben

Auf der Webseite unter http://www. lonewulf.eu, bei dem ein Bild beim Schweben bewegt wird. Dieses Phänomen tritt nur bei Chrome auf und führt zu einer Untersuchung des zugrunde liegenden CSS.

Das bereitgestellte CSS enthält mehrere Deckkraftdeklarationen, die den Grad der Transparenz für das Bild angeben. Wenn jedoch der Hover-Zustand aktiviert wird, verschiebt sich das Bild geringfügig nach rechts.

Eine mögliche Lösung für dieses visuelle Artefakt besteht darin, die folgende Eigenschaft in das Hover-Element zu integrieren, das die Deckkraft regelt:

<code class="css">-webkit-backface-visibility: hidden;</code>

Die Sichtbarkeit der Rückseite bezieht sich auf das Verhalten von Elementen, die Transformationsvorgängen unterliegen. Wenn sich das Bild beim Schweben bewegt, verhindert diese Eigenschaft eine solche unbeabsichtigte Verschiebung. Das Webkit-Präfix gilt ausschließlich für Webbrowser, die auf der WebKit-Engine basieren, wie z. B. Chrome.

Ein umfassendes Verständnis der Backface-Visibility und ihrer Auswirkungen finden Sie in der CSS-Tricks-Dokumentation unter http://css- tricks.com/almanac/properties/b/backface-visibility/.

Das obige ist der detaillierte Inhalt vonWarum verschiebt sich mein Bild beim Schweben in Chrome nach rechts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!