Going to the img element causes resizing or moving

Question

I am making the opacity transition to the img element, as it is here, and I see that the size of img changes or img moves when the transition ends or begins;

Here is simple CSS for the style.

img{
    height:165px;
    width:165px;
    opacity:0.4;
    transition: all linear 1s;
}

img:hover{
    opacity:1;
}

I tested this on Chrome version 31. How can I get rid of this problem?

Change: this problem appears when the Chrome browser has a larger scale, for example, 110% or 125%

Answer 1

This seems to be a bug in Chrome, just the transparency transition doesn't matter to me.

Apply 3D transformation, nothing to solve the problem.

-webkit-transform: translateZ(0);

Answer 2

, all:

transition: opacity linear 1s;

http://jsfiddle.net/cKUFD/4/

Answer 3

, :

https://jsfiddle.net/s04428yc/15/

, - . , .

, @addedlovely :

-webkit-transform: translateZ(0);

- hover.

.

Answer 4

1 . , , 1 .

-webkit-transform: translateZ(0); , , 1px . ( 1 , , , .)

, 1 , , , , , .