动画在 FF 和 IE 上冻结，但不是 Chrome

Posted 2023-03-06

【中文标题】动画在 FF 和 IE 上冻结，但不是 Chrome

【英文标题】：Animation freezes on FF an IE but not Chrome

【发布时间】：2015-12-18 06:57:06

【问题描述】：

我的应用程序中有一个加载微调器动画，当它执行繁重的 js 执行时，它在 FF 和 IE 中一直冻结，但在执行繁重的 js 执行时在 chrome 中运行良好。

我做了一个 plunker 来演示这个问题。由于在不同浏览器上的性能不同，我做了三个不同的。它们之间的唯一区别是重复的项目数量。不确定它是否也依赖于计算机，在这种情况下，也许您可​​以更改项目数量以获得较小的性能影响。

在这个Chrome version 中，当我重新填充列表时，微调器动画会继续旋转，即使您可以看到更新 ng-repeat 需要一段时间。

在此FireFox version 和IE version 中，微调器在重新填充列表时停止其动画。

CSS：

.spinner-container 
  position: absolute;
  top: 40%;
  left: 50%;


#preloader 
  margin: 0 auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid red;
  border-right: 1.1em solid red;
  border-bottom: 1.1em solid red;
  border-left: 1.1em solid green;
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;

#preloader,
#preloader:after 
  border-radius: 50%;
  width: 80px;
  height: 80px;

@-webkit-keyframes load8 
  0% 
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  
  100% 
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  

@keyframes load8 
  0% 
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  
  100% 
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  

有谁知道这是为什么，也许是一个解决方案？

当然，我们会尝试重构“繁重的 js 执行”，但这可能需要一段时间，而且最好同时有一个合适的加载微调器。

谢谢

【问题讨论】：

您可以强制硬件加速以抵消 JS 的执行，但这可能最终会影响整体性能，因为它们将为在后台渲染 CSS 和 JS 提供额外的能力。 davidwalsh.name/translate3d

我看到你有 Chrome 的 -webkit 前缀，你有没有尝试将 -moz 和 -ms 前缀用于动画、变换和关键帧？

@JuanC.V.刚才在plunkers试了一下，没有效果。他们仍然冻结

@mcclaskiem 我已经使用变换来旋转。有没有办法同时使用rotate和translate3d？

@Gustav 如果您使用的是纯 css3，则可以简单地在此 SO 帖子中列出的转换属性中传递多个。 ***.com/questions/10765755/… 我强烈建议尽可能使用 Sass。我使用 bourbon.io，它允许我这样编写它：@include transform(rotate(45deg) translateY(-50%)); 这也处理 mxin 内部 -webkit- 和 -moz- 的所有前缀。让我知道这是否有帮助

【参考方案1】：

这是预期的行为，这就是浏览器在单线程中进行渲染的方式。 Chrome（准确地说是 Webkit 浏览器）在这方面有所不同，这就是它们通常被称为“快速”和“响应式”的原因。 This article 总结了这一点。

您可能希望将 CPU 密集型任务委托给 Web Worker。

【讨论】：

好吧，改变它的代码。似乎另一个线程中的 css 动画正在为其他浏览器工作，但还没有