铬不透明问题 - 图像上悬停动作(image moves on hover - chrome opa

似乎是与我的第一个问题在这里： 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:

出于某种原因，铬解释元素的无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;

在我的特殊情况下，这避免了类似像素跳跃问题是translateZ(0)在Internet Explorer中介绍，尽管在Chrome修理东西。

大多数其他的解决方案在这里建议，涉及变换（例如， translateZ(0) rotate(0) translate3d(0px,0px,0px)用人工元素的绘画转移到GPU，等）的工作，可以更有效地渲染。 will-change提供了一个暗示有可能类似的效果（允许浏览器更有效地渲染过渡）的浏览器，但感觉少哈克（因为它明确地解决问题，而不是只是轻推使用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:

背面可见性（或-webkit-背面可见性）只有解决了该问题在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:

我就遇到了这个问题，在一个网格中的每个图像被嵌套在该有显示图像：inline-block的声明。 这Jamland上面发布的解决方案合作来修正此问题时显示：inline-block的; 被声明父元素。

我有另外的网格，其中的影像在一个无序列表，我能刚宣布显示：块; 与父列表项，并宣布背面能见度宽度：隐藏; 图像元件上，并且似乎没有被悬停任何位置偏移。

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 - 位置：相对于需要我重新考虑我如何定位我的元素，变换：旋转（0）可与现有的干扰转换并给出靠不住的小过渡效果时，我有一个过渡时间设定，并且如果我真的需要一个背面背面能见度将无法正常工作（并需要一大堆前缀的。）

我发现的最懒的解决方法就是把我的元素上的不透明度，这是非常接近，但并不完全，1。这是只有在不透明的1个问题，所以它不会破坏或干扰我的任何其他样式：

opacity:0.99999999;

Answer 12:

已经标志着里克希内尔的答案是正确的我，然后发现它并没有解决这个问题。

在我来说，我有一个包含最大宽度专区内响应宽度图像。 一旦站点宽度跨越该最大宽度的图像上悬停移动（使用CSS变换）。

在我的情况下，修复是简单地修改最大宽度为三个，三列在这种情况下多，它完全固定它。

Answer 13:

我注意到你有包含在你的CSS不透明度。 我有同样的确切问题与Chrome浏览器（上悬停的图像移动）..我所做的只是关闭不透明度，并解决了，没有更多的图像中的运动。

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

Answer 14:

有同样的问题，我修复了把阶级在IMG标签中的src之前。

文章来源: image moves on hover - chrome opacity issue