html - 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);