Firefox中的Jerky CSS3过渡

Question

我正试图在翻转时做一个简单的图像淡入淡出 - 在Chrome中工作得很好而且流畅，但Firefox有点跳跃。我已尝试在容器上执行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; }

Answer 1

我的最佳猜测是将图片的宽度设置为200px并且未指定高度会导致浏览器计算图像的高度。如果高度计算到一个很好的整数，则不是问题。如果高度计算为小数，则可能是问题的原因。

在这种情况下，图像的自然尺寸为275像素×183像素。

通过将图像宽度更改为200px，您将图像缩小为72.727272 ...％的自然尺寸。

275/200 = 0.727272 ... 或者如果你喜欢分数： 275（8/11）= 200

现在在高度上运行相同的等式：

183（8/11）= 133.090909 ......

看起来，在正常情况下，部分像素被裁剪，但在过渡期间，部分像素未被裁剪，并且图像稍微扭曲以显示相同高度内的部分像素。 / p>

将向下裁剪为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 */
}

Answer 2

在我的Firefox上运行良好。

无论如何，您可以尝试添加一些特殊属性，这些属性将为转换准备浏览器，并实际渲染元素并考虑到可能的转换。

这样的属性是transform: translate3d(0,0,0);

像这样：

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