image moves on hover - chrome opacity issue

Question

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

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

Answer 1

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.

Answer 2

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

Answer 3

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.

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.

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

Answer 4

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.

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

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

Answer 6

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.