Transition on img element cause size change or moving - html

Question

I do opacity transition on img element as it is in here and i see that img size changing or img is moving when transition on end or start;
Here is simple css code for styling.
img{
height:165px;
width:165px;
opacity:0.4;
transition: all linear 1s;
}
img:hover{
opacity:1;
}
I tested it on Chrome 31 version. How can i get rid of this problem ?
Edit: This problem appears when Chrome browser is in bigger zoom like 110% or 125%

Answer 1

Seems to be a bug in Chrome, just transitioning the opacity makes no difference for me.
Apply a 3D transform, of nothing, to resolve the issue.
-webkit-transform: translateZ(0);

Answer 2

I don't see the movement but you can try with just the specific property instead of all:
transition: opacity linear 1s;
The demo http://jsfiddle.net/cKUFD/4/

Answer 3

I Had the same problem, so i tried different images in this fiddle:
https://jsfiddle.net/s04428yc/15/
The first image works fine, while the second contracts on hover.
So i came to the conclusion that the image ratio is causing the problem.
And the solution was, like #addedlovely already stated:
-webkit-transform: translateZ(0);
and this should be applied on the element without the hover pseudo selector.
Or one could simply change the actual image ratio.

Answer 4

Adding a 1px transparent border to the right of the element fixed this for me. I had a grid of images with no space at all between them, and this bug would cause some of them to expand by 1 pixel horizontally when the transition happened.
-webkit-transform: translateZ(0); does work, however, it also changed the width of some of the images by 1px permanently. (This fix also changes the width of the images by 1px permanently, but at least it's consistent.)
I ended up liking the look of a 1 pixel border more anyway and so I kept it, but this obviously won't be a fix for everyone because it changes the look of your page.