Firefox 中的 jQuery 和 CSS 动画 Choppy

Posted 2023-03-06

【中文标题】Firefox 中的 jQuery 和 CSS 动画 Choppy

【英文标题】：jQuery and CSS Animations Choppy in Firefox

【发布时间】：2012-02-14 18:18:10

【问题描述】：

我正在开发具有大量 jQuery 动画的minisite。它在 Safari、Chrome 和 IE9 中运行良好，但在 OSX 上的 Firefox（7、8 和 9）中动画效果非常不稳定。我认为 CSS 动画会更流畅，所以我adapted 网站的 iPad 版本并在 Firefox 中进行了尝试。看起来一样糟糕。

我没有花很多时间使用 Firefox，所以我不确定我在这里做错了什么。我是否需要触发 GPU 加速（例如在 Webkit 中使用 translateZ(0)），或者它只是一直用于所有事物（例如 IE9？）Firefox 是否不够强大，即使使用 GPU 也是如此？

如果我能得到任何帮助，我将不胜感激。在这方面，我有点束手无策。

【问题讨论】：

只是让你知道，动画对我来说也有点不稳定。我在双 Xeon 四核 + nVidia Quadro 系统上的 Win 7 64 位上运行 Chrome 16

【参考方案1】：

经过大量的环顾和提问后，Firefox 似乎无法像其他浏览器那样处理 DOM 动画。所以看起来我只能忍受波涛汹涌的 Firefox 动画了。

【讨论】：

我最近遇到了太多火狐的bug，大家都应该放弃浏览器了。

【参考方案2】：

我知道这个问题是几年前提出的，但我只是偶然发现了它，除了“firefox 很烂”之外没有真正的答案。在 Firefox 中为动画 dom 元素启用硬件加速的技巧是在平移的同时添加一个小旋转。例如：

@keyframes square-animation 
    0%, 100% 
        transform: translate(600px, 160px) rotate(0.01deg);
    
    50% 
        transform: translate(355px, 160px) rotate(0.01deg);
    

它断断续续的原因是为了避免模糊 div 动画中的任何内容（尤其是文本）。虽然我个人认为这不是默认行为的正确选择，但您可以看到推理here。

【讨论】：

我讨厌这是如何工作的，但谢谢。多年来，这一直是 Firefox 的一个问题。很糟糕，我们不得不求助于这样的东西来让动画更接近它们在 Chrome 中的样子。

【参考方案3】：

我注意到当 firefox 窗口化时动画不会卡顿， 我在 Win 7 x32 上。他们的工作非常顺利。

只有过渡时，动画有点不稳定。休息很好，该网站是您迄今为止所做的一项令人惊叹的工作！

【讨论】：

谢谢，但艺术和概念是设计师的，我只是让它动起来。