Firefox中的Jerky CSS3过渡

wickywills 发表于 Dev

邪恶意志

我正在尝试在翻转时执行简单的图像淡入-在Chrome中可以正常且流畅地工作，但Firefox有点跳动。我已经尝试过backface-visibility对容器进行操作，但是仍然没有运气。

谁有想法？

的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 x 183px。

通过将图像的宽度更改为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 */
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-10

我来说两句

0条评论

登录后参与评论

来自分类Dev