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

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.

//fixes image jiggle issue, please do not remove
img {
  -webkit-backface-visibility: hidden; //Webkit fix
  transform: translate3d(0px,0px,0px); //Firefox fix
}

Answer 2

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

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:

opacity:0.99999999;

Answer 3

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.

Answer 4

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

Answer 5

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:

-webkit-transform: translateZ(0);

All credit to this answer via this subsequent answer

Answer 6

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

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.