图像移动悬停- chrome不透明度问题

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

14 个解决方案

#1

213

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.

在具有不透明度的悬浮元素上。后台可见性与转换有关，所以@Beskow的应用与此有关。由于这是一个webkit特有的问题，您只需为webkit指定后台可见性。还有其他供应商前缀。

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

有关更多信息，请参见http://css-魔术师s.com/almanac/properties/b/backface-visibility/。

#2

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:relative to your a.img elements there will be no more left/right movement as their opacity varies.

出于某种原因，Chrome以一种不同的方式解释元素的位置，而没有1的不透明度。如果应用CSS属性位置:相对于a。img元素将不再有左右移动，因为它们的不透明度不同。

#3

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.

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

#4

I was need apply both backface-visibility and transform rules to prevent this glitch. Like this:

我需要应用后台可见性和转换规则来防止这个故障。是这样的:

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

#5

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);

#6

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.

在我的例子中，这避免了在ie中引入的类似的像素跳跃问题，尽管在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-change provides 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 support is 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.

已经说过,值得牢记的是,浏览器支持不那么好会改变(尽管如果问题是Chrome只有这可能是一件好事!),而且在某些情况下它可以介绍自己的问题,但是,这是另一个可能的解决这个问题。

#7

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.

后台可见性(或-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
}

#8

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 answer via this subsequent answer

所有这些答案都是通过这个答案来回答的。

#9

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.

我在网格中使用图像处理这个问题，每个图像嵌套在一个显示:inline-block声明。当显示:inline-block时，Jamland发布在上面的解决方案解决了这个问题;在父元素上声明。

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.

我有另一个网格图像在无序列表中我可以声明显示:block;父列表项上的宽度和声明的后台可见性:隐藏;在图像元素上，似乎没有任何位置移动。

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

#10

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

在这个问题上我得到了解决方案。使用-webkit-backface-visibility:隐藏;这样，图像就不会在不透明的悬停过渡中移动

/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

#11

I had trouble with all the other solutions here, as they require changes to the CSS that may break other things -- position:relative requires me to completely rethink how I'm positioning my elements, transform:rotate(0) can interfere with existing transforms and gives wonky little transition effects when I have a transition-duration set, and backface-visibility won't work if I ever actually need a backface (and requires a whole lot of prefixing.)

这里有麻烦与所有其他的解决方案,他们需要改变CSS,可能会破坏其他东西——位置:相对要求我完全重新考虑我定位元素,变换:旋转(0)可以干扰现有的转换,给靠不住的转换效果,当我有一个transition-duration集,而且backface-visibility不会工作,如果我真的需要一个沿墙和需要很多的前缀。

The laziest solution I found is to just set an opacity on my element which is very close to, but not quite, 1. This is only a problem if opacity's 1, so it's not going to break or interfere with any of my other styles:

我找到的最懒的解决办法就是在我的元素上设置一个不透明度，它非常接近，但不完全是1。只有当不透明度为1时才会出现这个问题，所以它不会破坏或干扰我的其他样式:

opacity:0.99999999;

#12

Having marked Rick Giner's answer as correct I then found out it did not fix the issue.

把瑞克·吉纳的回答标记为正确之后，我发现这并不能解决问题。

In my case I have responsive width images contained within a max-width div. Once the site width crosses that max width the images move on hover (using css transform).

在我的例子中，我有一个响应宽度的图像包含在一个最大宽度的div中。一旦站点的宽度超过了最大宽度，图像就会在悬停状态下移动(使用css转换)。

The fix in my case was to simply amend the max width to a multiple of three, three columns in this case, and it fixed it perfectly.

在我的例子中，修正的方法是将最大宽度修改为三列的倍数，在这个例子中是三列的倍数，并且它完美地修正了它。

#13

I noticed you had opacity included in your CSS. I had the same exact issue with Chrome (the image moving on hover) .. all I did was disable the opacity and it was solved, no more images moving.

我注意到你的CSS中包含了不透明度。我对Chrome也有同样的问题。我所做的就是禁用不透明度，它被解决了，不再有图像移动。

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

#14

Had the same issue, My fix was putting the class before the src in the img tab.

有同样的问题，我的修复是将类放在img选项卡中src之前。

#1

213