使用css过渡和不透明度悬停时闪烁的图像

Question

有没有人知道为什么在webkit浏览器（chrome，opera）上，悬停的图像闪烁？这种情况仅在第二列。有一个例子http://codepen.io/anon/pen/fxJAk

我该如何解决？它只是webkit浏览器的bug吗？它在firefox甚至Internet Explorer 11上都能正常工作。

它是在Chrome版本33.0.1750.146，Opera 20.0.1387.64

Answer 1

尝试为img添加css规则：

-webkit-transform:(0); -moz-transform:(0); -o-transform:(0); transform:(0);

http://codepen.io/anon/pen/FpwIy

Answer 2

通常的解决方法（对于WebKit）是添加：

img {
    -webkit-transform: translateZ(0);
}

Updated codepen