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

【问题标题】：image moves on hover - chrome opacity issue图像在悬停时移动 - 铬不透明度问题
【发布时间】：2012-10-10 09:59:48
【问题描述】：

将鼠标悬停在缩略图上时，图像会向右移动一点，并且仅在 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;
}

【问题讨论】：

在22.0.1229.94 m上不为我移动
最好将鼠标悬停在 A 标签上，而不是图像本身。
是的 .img 是一个 href 类。我应该给它一个不同的名字吗？也许现在它与冲突？编辑：Nvm，我将名称从 .img 更改为 .thumb 并且仍然遇到此问题。还有其他建议吗？
这可能是 Fancybox 正在做的事情。
在 Z 轴上使用平移是唯一对我有用的解决方案：stackoverflow.com/questions/12502234/…

标签： css image google-chrome hover opacity

【解决方案1】：

另一种解决方案是使用

-webkit-backface-visibility: hidden;

在具有不透明度的悬停元素上。背面可见性与transform 相关，因此@Beskow 与它有关。由于它是 webkit 特定的问题，您只需要指定 webkit 的背面可见性。还有其他vendor prefixes。

请参阅http://css-tricks.com/almanac/properties/b/backface-visibility/ 了解更多信息。

【讨论】：

这是正确答案，但你不得不说backface-visibility 属性必须在img 元素上设置。在我的例子中，具有不透明度的元素是 a 元素，它包裹了 img，所以你的答案对我来说并不完美。顺便说一句，我也在 Firefox for Mac 上发现了这个故障，所以我建议使用每个供应商前缀。
@Oliboy50 对不起，我不得不争论。我的情况是，错误元素只是空的divs 和background-image。 @alpipego 感谢您的解决方案！
这对我有用，但让我的图像看起来很糟糕，像素化而不是平滑。
我不知道它为什么会起作用，但我碰巧遇到了这个问题并试了一下。这修复了一个在我的网站上持续出现数月的错误，我永远无法弄清楚。谢谢！
我还必须添加一个z-index 才能让悬停效果正常工作。

【解决方案2】：

由于某种原因，Chrome 以不同的方式解释不透明度为 1 的元素的位置。如果您将 CSS 属性 position:relative 应用到您的 a.img 元素，则不会再有左/右移动，因为它们的不透明度会有所不同。

【讨论】：

有谁知道这是为什么？确定不是 hasLayout 的事吗？
刚才在 Firefox 中遇到了同样的问题。相对没有修复它，但在元素上设置它 - transform: translate3d(0px,0px,0px);
我在 Safari 上遇到了同样的问题，transform: translate3d(0px,0px,0px); 工作了

【解决方案3】：

我遇到了同样的问题，我用 css transform rotate 修复了它。像这样：

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

它在主流浏览器中运行良好。

【讨论】：

谢谢。这在 Firefox 中修复了它！ :D
是的，我也是。背面技巧对我不起作用（img inside a），但这个对我有用！谢谢！
这是唯一对我有用的答案（Chrome）。谢谢！

【解决方案4】：

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

will-change: opacity;

在我的特殊情况下，这避免了 translateZ(0) 在 Internet Explorer 中引入的类似像素跳跃问题，尽管在 Chrome 中进行了修复。

这里建议的大多数其他涉及转换的解决方案（例如translateZ(0)、rotate(0)、translate3d(0px,0px,0px) 等）通过将元素的绘制交给 GPU 来工作，从而实现更高效的渲染。 will-change 向浏览器提供了一个提示，该提示可能具有类似的效果（允许浏览器更有效地呈现过渡），但感觉不那么笨拙（因为它明确地解决了问题，而不仅仅是推动浏览器使用 GPU）。

话虽如此，但值得牢记的是，browser support 不如 will-change 好（尽管如果问题仅出在 Chrome 上，那么这可能是一件好事！），并且在某些情况下它可以引入problems of its own，但它仍然是解决此问题的另一种可能方法。

【讨论】：

这应该是公认的答案。与其他答案不同，只有在 GNU/Linux 下的 Firefox 84.0.1 中这对我有用。经过这么长时间后，这个错误仍未解决，这令人难以置信。

【解决方案5】：

我需要同时应用 backface-visibility 和 transform 规则来防止这个故障。像这样：

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

【讨论】：

【解决方案6】：

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

filter: brightness(1.01);

【讨论】：

悬停时过滤器过渡的相同问题。这也为我解决了问题。
使用滤镜：亮度（1）；在 img 元素上为我修复了它，谢谢
这对我有用，在悬停图像上应用灰度滤镜时出现 1px 问题。为什么浏览器开发者最终不能修复所有这些问题？为什么我必须使用背面可见性和所有这些东西......
这修复了它，但过渡动画停止工作

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

【讨论】：

【解决方案8】：

我在 Safari 8.0.2 中遇到了类似的问题，图像在不透明度转换时会抖动。此处发布的修复均无效，但以下修复有效：

-webkit-transform: translateZ(0);

所有归功于this answer 来自this subsequent answer

【讨论】：

尝试了所有其他答案，这是第一个有效的答案！

【解决方案9】：

我在网格中遇到了这个问题，每个图像都嵌套在一个已声明的 display: inline-block 中。 Jamland 上面发布的解决方案可以解决 display: inline-block; 时出现的问题。在父元素上声明。

我有另一个网格，其中图像位于无序列表中，我能够声明 display: block;以及父列表项的宽度并声明 backface-visibility: hidden;在图像元素上，悬停时似乎没有任何位置偏移。

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

【讨论】：

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

【讨论】：

【解决方案11】：

我在这里遇到了所有其他解决方案的问题，因为它们需要更改 CSS，这可能会破坏其他东西—— position:relative 要求我完全重新考虑如何定位我的元素，transform:rotate(0) 可以当我设置了转换持续时间时，会干扰现有的转换并给出不稳定的小转换效果，如果我真的需要背面（并且需要大量前缀），背面可见性将不起作用。

我发现的最懒惰的解决方案是在我的元素上设置一个非常接近但不完全是 1 的不透明度。如果不透明度为 1，这只是一个问题，所以它不会破坏或干扰我的任何其他风格：

opacity:0.99999999;

【讨论】：

【解决方案12】：

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

在我的情况下，我在最大宽度 div 中包含响应宽度图像。一旦站点宽度超过该最大宽度，图像就会在悬停时移动（使用 css 转换）。

在我的情况下，解决方法是简单地将最大宽度修改为三列的倍数，在这种情况下，它完美地修复了它。

【讨论】：

感谢您的评论，我还注意到相对位置并不总是可以作为解决方案，因此如果再次出现此问题，我也会尝试您的方法。

【解决方案13】：

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

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

【讨论】：

【解决方案14】：

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

【讨论】：