图像移动hover – 铬不透明问题
我的网页似乎有一个问题： http : //www.lonewulf.eu
当鼠标hover在缩略图上时，图像右移一点，而且只发生在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; } 另一个解决scheme是使用
-webkit-backface-visibility: hidden;
在具有不透明度的hover元素上。 背景知名度与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);
它在主stream浏览器中工作正常。
我需要申请backface-visibility和transform规则，以防止这个毛刺。 喜欢这个：
a {-webkit-transform: rotate(0);} a img {-webkit-backface-visibility: hidden;}
解决这个问题的另一个解决scheme是添加规则：
will-change: opacity;
在我的具体情况下，这避免了类似的像素跳跃问题，即在Internet Explorer中引入translateZ(0) ，尽pipe在Chrome中进行了修改。
这里提到的其他大多数解决scheme都是通过将元素的绘制交给GPU来实现，例如translateZ(0) ， rotate(0) ， translate3d(0px,0px,0px)等） 。 will-change会给浏览器提供一个暗示类似效果的提示（允许浏览器更有效地渲染转换），但是感觉不那么乱（因为它明确地解决了这个问题，而不是简单地使浏览器使用GPU）。
话虽如此，值得注意的是， 浏览器支持并不会will-change （尽pipe如果Chrome只是一个问题，那么这可能是一件好事！），在某些情况下，它可能会引入自己的问题但是，这仍然是解决这个问题的另一个可能的解决办法。
hover时，我使用了（非不透明）filter。 通过向基类添加规则来修复：
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);
所有信贷通过这个答案通过这个后来的答案
我遇到了这个问题与网格中的图像每个图像嵌套在一个显示：内联块声明。 Jamland上面发布的解决scheme在显示：inline-block; 是在父元素上声明的。
我有另一个网格的图像是在一个无序列表中，我只能声明显示：块; 和父列表项上的宽度并声明backface-visibility：hidden; 在图像元素上，似乎没有任何位置移动hover。
li { width: 33.33333333%; display: block; } li img { backface-visibility: hidden; }
我在这里有所有其他的解决scheme的麻烦，因为他们需要改变的CSS可能会打破其他事情 – 位置：相对要求我完全重新思考我如何定位我的元素，变换：旋转（0）可以干扰现有的当我有一个过渡时间设置时，转换并给出了令人毛骨悚然的小过渡效果，如果我真的需要一个背面（并需要大量的前缀），背面可见性将不起作用。
我发现最懒惰的解决scheme是在我的元素上设置一个不透明度，它非常接近，但不是完全是1.这只是一个问题，如果不透明的1，所以它不会打破或干扰我的任何其他风格：
opacity:0.99999999;
把Rick Giner的回答标记为正确后，我发现它没有解决问题。
在我的情况下，我有一个最大宽度div内包含的响应宽度图像。 一旦站点宽度超过最大宽度，图像将在hover上移动（使用css转换）。
在我的情况下，解决scheme是简单地将最大宽度修改为三倍，在这种情况下，三列的倍数，它完美地修复它。
在这个问题上解决alpipego解决了我的问题。 使用-webkit-backface-visibility: hidden; 有了这个图片，在hover不透明转变没有任何举措
/* fix error hover image opacity*/ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden;
我注意到你的CSS中包含了不透明度。 我有同样的确切问题与铬（图像移动hover）..我所做的是禁用不透明度，它被解决了，没有更多的图像移动。
.yourclass:hover { /* opacity: 0.6; */ }
