94

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

14 回答 14

231

另一种解决方案是使用

-webkit-backface-visibility: hidden;

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

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

于 2013-05-30T10:15:49.880 回答
34

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

于 2012-10-21T04:52:25.587 回答
21

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

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

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

于 2013-03-08T15:43:08.987 回答
15

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

will-change: opacity;

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

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

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

于 2016-11-08T17:21:11.467 回答
10

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

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}
于 2013-11-15T00:27:30.870 回答
10

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

filter: brightness(1.01);
于 2015-09-18T00:45:50.773 回答
6

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
}
于 2014-07-15T14:24:42.637 回答
4

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

-webkit-transform: translateZ(0);

通过此后续答案获得此答案的所有功劳

于 2015-01-21T19:50:25.087 回答
2

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

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

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }
于 2014-01-26T23:07:13.850 回答
2

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

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

opacity:0.99999999;
于 2014-05-28T15:40:06.423 回答
2

解决方案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;
于 2014-04-21T19:51:30.010 回答
1

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

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

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

于 2013-02-14T10:38:27.187 回答
0

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

于 2018-05-17T00:28:00.577 回答
0

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

.yourclass:hover {
  /* opacity: 0.6; */
}
于 2017-03-08T10:56:46.650 回答