Firefox 中的 CSS3 过渡

Posted 2023-03-06

【中文标题】Firefox 中的 CSS3 过渡

【英文标题】：Jerky CSS3 transition in Firefox

【发布时间】：2014-08-10 04:03:44

【问题描述】：

我正在尝试在翻转时做一个简单的图像淡入淡出 - 在 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" >
    </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; 

【参考方案1】：

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

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

通过将图像的宽度更改为 200 像素，您将图像缩小到其自然尺寸的 72.727272...%。

275/200 = 0.727272... 或者如果您更喜欢分数： 275(8/11) = 200

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

183(8/11) = 133.090909...

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

裁剪 向下 到 133 像素： 未裁剪且略微翘曲：

---

现在我们已经对导致问题的原因有了一个很好的假设，接下来是解决方案：

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

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 */

或者如果您担心使用 box-shadow 的跨浏览器兼容性，您也可以使用透明边框：

Working Example

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

【讨论】：

有时设置显式 height 不是我们想要的方式，所以我认为这种修复方法通常不好。无论如何，我们不得不承认，很难修复像 FireFox 这样糟糕的浏览器中的错误，就这样吧，记住只有一小部分用户（使用 FireFox）会遇到这个问题（这也不是真的严肃的）。我认为通过将201 px 设置为width 来进行修复会更好。

@KingKing 我意识到对高度进行硬编码并不理想，但是一旦您知道问题的原因，就可以更轻松地找到可以接受的解决方案。

看起来你的猜测似乎很接近，但最好找到一些谈论这个的参考。我认为改变不透明度与计算height 和width 无关，这是FireFox 内部的某种内部错误。

暂时+1 - 虽然不幸的是我的网站是响应式的，我无法明确设置元素的高度/宽度。如果它开始困扰我，我可能会使用 jQuery 进行淡入淡出！

@wickywills 看起来您是 FireFox 的粉丝，只是因为必须支持 FireFox，您必须摆脱使用简单的 CSS 来使用脚本解决方案。我永远不会这样做，除非问题很严重并且至少有 2 个（或更多）浏览器存在问题，否则不值得这样做。

【参考方案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; 

【讨论】：

我在 FF 中得到了轻微的移动，但这已经解决了。 +1

顺便说一下我用的是Firefox 30版

@wickywills 我已经在FF29上测试过了，看起来已经修复了，更新后尝试在FF30上测试。

我在 FF30 上再次测试，translate3d 似乎修复了它。另请记住，您不再需要 transform 的前缀。 caniuse.com/transforms2d

嗯，很奇怪，刚把FF从29更新到30，现在看来FF30没有解决这个问题（虽然我之前用FF29测试过，确实解决了这个问题）。跨度>