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

image moves on hover - chrome opacity issue

提问by zefs

There seems to be an issue with my page here: http://www.lonewulf.eu

我的页面似乎有问题：http: //www.lonewulf.eu

When hovering over the thumbnails the image moves a bit on the right, and it only happens on Chrome.

将鼠标悬停在缩略图上时，图像会向右移动一点，并且只会在 Chrome 上发生。

My css:

我的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;
}

回答by alpipego

Another solution would be to use

另一种解决方案是使用

-webkit-backface-visibility: hidden;

on the hover element that has the opacity. Backface-visibility relates to transform, so @Beskow's has got something to do with it. Since it is a webkit specific problem you only need to specify the backface-visibility for webkit. There are other vendor prefixes.

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

See http://css-tricks.com/almanac/properties/b/backface-visibility/for more info.

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

回答by Rick Giner

For some reason Chrome interprets the position of elements without an opacity of 1 in a different way. If you apply the CSS attribute position:relativeto your a.img elements there will be no more left/right movement as their opacity varies.

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

回答by Beskow

I had the same problem, I fixed it with css transform rotate. Like this:

我有同样的问题，我用 css 变换旋转修复了它。像这样：

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

It works fine in major browsers.

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

回答by Nick F

Another solution that fixed this issue for me was to add the rule:

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

will-change: opacity;

In my particular case this avoided a similar pixel-jumping issue that translateZ(0)introduced in Internet Explorer, despite fixing things in Chrome.

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

Most of the other solutions suggested here that involve transforms (eg. translateZ(0), rotate(0), translate3d(0px,0px,0px), etc) work by handing painting of the element over to the GPU, allowing more efficient rendering. will-changeprovides a hint to the browser that has presumably a similar effect (allowing the browser to render the transition more efficiently), but feels less hacky (since it's explicitly addressing the problem rather than just nudging the browser to use the GPU).

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

Having said that, it's worth bearing in mind that browser supportis not as good for will-change(though if the issue is with Chrome only then this might be a good thing!), and in some situations it can introduce problems of its own, but still, it's another possible solution to this issue.

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

回答by Juan Casares

I had a similar issue with (non-opacity) filters on hover. Fixed by adding a rule to the base class with:

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

filter: brightness(1.01);

回答by Jamland

I was need apply both backface-visibilityand transformrules to prevent this glitch. Like this:

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

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

回答by andersra

backface-visibility (or -webkit-backface-visibility) only fixed the issue in Chrome for me. To fix in both Firefox and Chrome I used the following combination of above answers.

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
}

回答by James Fletcher

I encountered a similar issue in Safari 8.0.2, where images would jitter as their opacity transitioned. None of the fixes posted here worked, however the following did:

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

-webkit-transform: translateZ(0);

All credit to this answervia this subsequent answer

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

回答by user2125009

I ran into this issue with images in a grid each image was nested in an that had display: inline-block declared. The solution that Jamland posted above worked to correct the issue when the display: inline-block; was declare on the parent element.

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

I had another grid where the images were in an unordered list and I was able to just declared display: block; and a width on the parent list item and declared backface-visibility: hidden; on the image element and there doesn't seem to be any position shift on hover.

我有另一个网格，其中图像位于无序列表中，并且我能够声明 display: block; 以及父列表项上的宽度和声明的背面可见性：隐藏；在图像元素上，悬停时似乎没有任何位置偏移。

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

回答by Lenin Zapata

The solution alpipegowas served me in this problem. Use -webkit-backface-visibility: hidden;With this the image no move in hover opacity transition

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