image moves on hover - chrome opacity issue

Solution 1:

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.

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

Solution 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.

Solution 3:

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

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

It works fine in major browsers.

Solution 4:

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.

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

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.

Solution 5:

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