css - Firefox中的Jerky CSS3过渡

我正在尝试在翻滚时做一个简单的图像淡入淡出-在Chrome中可以很好地平滑工作，但火狐有点神经质。我试过在容器上使用backface-visibility技巧，但仍然没有运气。
有人有什么想法吗？
JSFiddle
HTML

<div class="link-box large">
    <div class="image">

        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRStwH3maKRqLU8lLOo1XbO6uZIKHRyf2PGv66H6ol5mB0kS_0r" alt="">
    </div>
</div>

CSS

.link-box .image img { transition: all .2s ease-out; width:200px; }
.link-box.large { position: relative;}
.link-box.large:hover .image img { opacity: .65; }

最佳答案

我的最佳猜测是，将图像的宽度设置为200px，而不指定高度会导致浏览器计算图像的高度。如果高度计算成一个很好的整数，这不是问题。如果高度计算为十进制，则可能是问题的原因。
在这种情况下，图像的自然尺寸是275px×183px。
通过将图像宽度更改为200px，可以将图像缩小到其自然大小的72.727272…%。
275/200=0.727272…或者如果你喜欢分数：275（8/11）=200
现在在高度上运行相同的方程，得出：
183（8/11）=133.090909…
看起来，在正常情况下，部分像素会被剪切，但在转换期间，部分像素不会被剪切，图像会稍微扭曲以显示相同高度内的部分像素。
裁剪到133px：
不修剪和轻微弯曲：
既然我们对问题的起因有了一个很好的假设，那么我们就可以找到解决方案了：
您可以硬编码图像的高度：
Working Example

.link-box .image img {
    transition: all .2s ease-out;
    width:200px;
    height: 133px; /* manually set the height */
}

或者，如果您不想硬编码高度，也可以使用anti-alias hack修复问题，只需添加一个框阴影。
Working Example

.link-box.large:hover .image img {
    opacity: .65;
    box-shadow: 0 0 0 #000; /* add a non-visible box-shadow */
}

或者，如果您担心使用框阴影的跨浏览器兼容性，也可以使用透明边框：
Working Example

.link-box .image img {
    transition: all .2s ease-out;
    width:200px;
    border: 1px solid transparent; /* add transparent border */
}