圖像在懸停時移動 - 鉻不透明度問題

Question

我的頁面似乎存在問題： 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;
}

Answer 1

另一種解決方案是使用

-webkit-backface-visibility: hidden;

在具有不透明度的懸停元素上。 背面可見性與transform ，因此@Beskow與它有關。 由於它是webkit特定問題，因此您只需指定webkit的背面可見性。 還有其他供應商前綴 。

有關詳細信息，請參閱http://css-tricks.com/almanac/properties/b/backface-visibility/ 。

Answer 2

出於某種原因，Chrome以不同的方式解釋不具有不透明度1的元素的位置。 如果你應用CSS屬性position:relative對於你的a.img元素，不再有左/右移動，因為它們的不透明度會有所不同。

Answer 3

我有同樣的問題，我用css變換旋轉修復它。 像這樣：

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

它在主流瀏覽器中運行良好。

Answer 4

解決這個問題的另一個解決方案是添加規則：

will-change: opacity;

在我的特殊情況下，這避免了類似的像素跳躍問題，即在Internet Explorer中引入的translateZ(0) ，盡管在Chrome中進行了修復。

這里提出的涉及變換的大多數其他解決方案（例如， translateZ(0) ， rotate(0) ， translate3d(0px,0px,0px)等）通過將元素的繪制交給GPU來工作，從而允許更有效的渲染。 will-change為瀏覽器提供了一個類似效果的提示（允許瀏覽器更有效地呈現轉換），但感覺不那么hacky（因為它明確地解決了問題，而不僅僅是推動瀏覽器使用GPU）。

話雖如此，值得注意的是， 瀏覽器支持不會will-change （盡管問題只適用於Chrome，這可能是一件好事！），在某些情況下，它可能會引入自己的問題 ，但仍然是這個問題的另一種可能的解決方案。

Answer 5

我需要應用backface-visibility和transform規則來防止這種故障。 像這樣：

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}

Answer 6

我在懸停時遇到類似的問題（非不透明度）過濾器。 修復了通過向基類添加規則：

filter: brightness(1.01);

Answer 7

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
}

Answer 8

我在Safari 8.0.2中遇到了類似的問題，當不透明度轉換時，圖像會抖動。 此處發布的修復程序均無效，但以下情況如下：

-webkit-transform: translateZ(0);

所有信貸這個答案通過此后續的答案

Answer 9

我遇到了這個問題，網格中的圖像每個圖像都嵌套在一個顯示的內容中：聲明了內聯塊。 Jamland上面發布的解決方案在顯示時糾正了問題：inline-block; 是在父元素上聲明的。

我有另一個網格，圖像在一個無序列表中，我只能聲明display：block; 和父列表項上的寬度並聲明backface-visibility：hidden; 在圖像元素上，懸停時似乎沒有任何位置偏移。

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }

Answer 10

解決方案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;

Answer 11

我在這里遇到了所有其他解決方案的問題，因為它們需要對CSS進行更改，這可能會破壞其他事情 - 位置：相對要求我完全重新思考我如何定位我的元素，轉換：rotate（0）會干擾現有的當我有一個轉換持續時間設置時，轉換並給出了很小的過渡效果，如果我真的需要一個背面（並且需要大量的前綴），背面可見性將不起作用。

我找到的最懶的解決方案是在我的元素上設置一個非常接近但不完全是1的不透明度。如果不透明度為1，這只是一個問題，所以它不會破壞或干擾我的任何其他樣式：

opacity:0.99999999;

Answer 12

將Rick Giner的答案標記為正確后，我發現它沒有解決問題。

在我的情況下，我有響應寬度圖像包含在最大寬度div。 一旦站點寬度超過最大寬度，圖像就會在懸停時移動（使用css變換）。

在我的情況下修復是在這種情況下簡單地將最大寬度修改為三個，三列的倍數，並且它完美地修復了它。

Answer 13

我注意到你的CSS中包含了不透明度。 我與Chrome有同樣的問題（圖像在懸停時移動）..我所做的就是禁用不透明度並且它已經解決，沒有更多的圖像移動。

.yourclass:hover {
  /* opacity: 0.6; */
}

Answer 14

有同樣的問題，我的修復是將類放在img選項卡中的src之前。