img元素的转换导致大小改变或移动

Question

我在img元素上进行不透明度转换,因为它在这里,我看到img大小改变或img在转换结束或开始时移动;

这是一个简单的样式css代码.

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

img:hover{
    opacity:1;
}

我在Chrome 31版本上进行了测试.我该如何摆脱这个问题？

编辑:当Chrome浏览器处于110%或125%的较大缩放时,会出现此问题

Answer 1

似乎是Chrome中的错误，只是转换不透明度对我来说没有任何区别。

应用3D转换解决所有问题。

-webkit-transform: translateZ(0);

Answer 2

我没有看到移动，但您可以尝试仅使用特定属性而不是all：

transition: opacity linear 1s;