图像在悬停时移动-铬不透明问题

我的页面似乎在这里有问题：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;
}

另一个解决方案是使用

-webkit-backface-visibility: hidden;

在具有不透明度的悬停元素上。背面可见性与有关transform，因此@Beskow与它有关。由于这是特定于Webkit的问题，因此只需要指定webkit的背面可见性即可。还有其他供应商前缀。

有关更多信息，请参见http://css-tricks.com/almanac/properties/b/backface-visibility/。

由于某些原因，Chrome会以不同的方式解释不透明度为1的元素的位置。如果将CSS属性position:relative应用于a.img元素，则由于它们的不透明度发生变化，因此将不再有左右移动的趋势。

我有同样的问题，我用css变换旋转解决了。像这样：

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

在主要的浏览器中运行良好。

为我解决此问题的另一个解决方案是添加规则：

will-change: opacity;

在我的特定情况下translateZ(0)，尽管可以解决Chrome中的问题，但是这避免了Internet Explorer 中引入的类似像素跳跃问题。

大多数其他解决方案的建议在这里涉及转换（例如translateZ(0)，rotate(0)，translate3d(0px,0px,0px)等），由移交给GPU的元素的绘画作品，可以更有效地渲染。will-change向浏览器提供的提示可能具有相似的效果（允许浏览器更有效地呈现过渡），但感觉不那么扎实（因为它明确地解决了该问题，而不是仅仅让浏览器使用GPU）。

话虽这么说，值得记住的是浏览器支持并没有那么好will-change（尽管如果问题仅在于Chrome，那么这可能是件好事！），在某些情况下它可能会带来自己的问题，但仍然，这是解决此问题的另一种方法。

我需要同时适用backface-visibility和transform规则，以防止这种毛刺。像这样：

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

我在悬停时遇到了（非不透明）过滤器类似的问题。通过将规则添加到基类来解决：

filter: brightness(1.01);

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
}

我在Safari 8.0.2中遇到了类似的问题，其中图像的不透明度过渡时会抖动。此处发布的所有修补程序均无用，但是以下方法起作用：

-webkit-transform: translateZ(0);

通过此后续答案对该答案的全部功劳

我遇到了一个问题，即网格中的图像每个图像都嵌套在一个具有显示的图像中：声明了inline-block。Jamland上面发布的解决方案在显示以下内容时可以解决此问题：inline-block; 是在父元素上声明的。

我还有另一个网格，其中图像位于无序列表中，因此我可以只声明display：block; 父列表项上的宽度，并声明了backface-visibility：隐藏；在图像元素上，并且悬停时似乎没有任何位置偏移。

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

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

我在这里遇到的所有其他解决方案都遇到了麻烦，因为它们要求更改CSS可能会破坏其他东西-position：relative要求我完全重新考虑如何放置元素，transform：rotate（0）会干扰现有的当我设置了过渡持续时间时，它可以进行变换并提供一些奇特的过渡效果，并且如果我实际上需要背面（并且需要大量前缀），则背面可见性将不起作用。

我发现的最懒惰的解决方案是在我的元素上设置非常接近但不完全为1的不透明度。这仅是不透明度为1的问题，因此不会破坏或干扰我的其他任何样式：

opacity:0.99999999;

将Rick Giner的答案标记为正确后，我发现它不能解决问题。

就我而言，我在max-width div中包含了响应宽度的图像。一旦站点宽度超过最大宽度，图像就会悬停移动（使用CSS变换）。

在我的情况下，解决方法是简单地将最大宽度修改为三，三列的倍数，然后将其完美地固定。

我注意到您的CSS中包含不透明度。我在Chrome上遇到了完全相同的问题（图像在悬停时移动）..我所做的只是禁用了不透明度，此问题得以解决，不再有图像移动。

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

遇到相同的问题，我的解决方法是将类放在img选项卡中的src之前。