img元件上的过渡会导致尺寸改变或移动

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;

我在img元素上做不透明过渡在这里我看到img的尺寸变化或者img在过渡结束或开始时移动;

Here is simple css code for styling.

这里是样式化的简单css代码。

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 ?

我在Chrome 31版本上测试过。我怎样才能摆脱这个问题呢?

Edit: This problem appears when Chrome browser is in bigger zoom like 110% or 125%

编辑:当Chrome浏览器放大110%或125%时就会出现这个问题

3 个解决方案

#1

Seems to be a bug in Chrome, just transitioning the opacity makes no difference for me.

似乎是Chrome的一个缺陷，仅仅过渡不透明对我来说没有什么区别。

Apply a 3D transform, of nothing, to resolve the issue.

应用3D转换，什么都不做，以解决问题。

-webkit-transform: translateZ(0);

#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/

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

#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:

解决办法是，@addedlovely已经说过:

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

也可以简单地改变实际的图像比例。

#1