懸停時圖像移動：解決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 文件。