FireFox 中的同步 CSS3 过渡不平滑

Posted 2023-03-06

【中文标题】FireFox 中的同步 CSS3 过渡不平滑

【英文标题】：Synchronous CSS3 transition in FireFox is not smooth

【发布时间】：2012-10-19 07:26:15

【问题描述】：

我正在尝试使用 CSS3 过渡创建选定或悬停菜单效果。我通过同时为border-left-width和padding-left设置动画来做到这一点。边框增加了 6 像素，内边距减少了 6 像素，速度均为 0.3 秒。

在 Chrome 中，两者的动画速度相同并且看起来很流畅。在 IE 中，过渡是即时的（显然没有过渡/动画），并且看起来不错。在 Firefox 中，边框和填充同时动画，但它出现在不同的时间间隔或其他东西上，使文本和容器反弹并看起来很紧张。

这是一个 Fiddle 示例：http://jsfiddle.net/crisp330/w7phH/1/（查看 FF 和 Chrome 之间的区别？）

有没有办法让 FireFox 像 Chrome 一样流畅地制作动画？我知道我可以使用替代方法，例如在 LI 中放置另一个元素并为其设置动画……但这种方法非常干净！

这是 CSS3 过渡的主要内容（参见 jsFiddle 的工作示例）：

ul li 
    padding-left: 12px;
    border: 0 none;


ul li:hover 
    padding-left: 6px;
    border-left: 6px solid #d17519;
    transition: border-left-width .3s, padding-left .3s;
    -moz-transition: border-left-width .3s, padding-left .3s;
    -webkit-transition: border-left-width .3s, padding-left .3s;
    -o-transition: border-left-width .3s, padding-left .3s;

【参考方案1】：

你真正的问题是 Firefox 允许非整数像素填充值，但只允许整数设备像素边框值（因为事实证明网页依赖于整数宽度的边框）。 Chrome 将两者都强制为整数像素，所以事情就在那里解决了。目前。直到他们开始进行亚像素填充。但在 Firefox 中，只要边框从略小于半整数变为略大​​于半整数，就会出现 1-device-px 反弹。

不幸的是，这里确实没有一个很好的解决方案。例如，请参阅http://robert.ocallahan.org/2008/01/subpixel-layout-and-rendering_22.html 以了解 WebKit 方法导致的问题的描述。

【讨论】：

很好的答案...我不知道。谢谢！

我们现在是 2018 年，我仍然看到这种行为。 Google Chrome 中的流畅动画，Firefox 中抖动的口吃动画。还是没有解决办法？

除了不动画边框宽度？

【参考方案2】：

显然，它周围有一个hack，就是为firefox添加一些旋转。然而，此解决方案在最终输出中产生了轻微的旋转，但提供了平滑的过渡。

ul li:hover 
    -moz-transform: rotate(0.02deg);

解决方案取自this website