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 ......

看起来,在正常情况下,部分像素被裁剪,但是在过渡期间,部分像素没有被裁剪,并且图像稍微扭曲以显示相同高度内的部分像素.

裁剪下来到133px:

没有裁剪和略微扭曲:

既然我们对导致问题的原因有一个很好的假设,那就是解决方案:

您可以硬编码图像的高度:

工作实例

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

或者,如果你不想硬编码高度,你也可以用一个反别名黑客解决问题,只需添加一个盒子阴影.

工作实例

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

或者,如果您担心使用框阴影的跨浏览器兼容性,您还可以使用透明边框:

工作实例

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