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

Question

我在img元素上执行不透明度转换，因为它在here中，我看到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;

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

Answer 3

我有同样的问题，所以我在这个小提琴中尝试了不同的图像：

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

第一张图片工作正常，而第二张图片悬停。 所以我得出的结论是图像比率导致问题。

解决方案就像@addedlovely已经说过：

-webkit-transform: translateZ(0);

，这应该应用于没有悬停伪选择器的元素。

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

Answer 4

在元素的右边添加了一个1px的透明边框，这对我来说是固定的。我有一个图像网格，它们之间根本没有空间，并且此错误会导致过渡发生时，其中一些图像水平扩展1像素。

-webkit-transform: translateZ(0);确实有效，但是，它也将某些图像的宽度永久更改了1px。 （此修复程序还永久将图像的宽度更改了1px，但至少是一致的。）

我最终还是更喜欢1像素边框的外观，所以我保留了它，但这显然不能解决每个人的问题，因为它会改变页面的外观。