时间戳

首页 > 解决方案 > Firefox 中的 CSS 动画不流畅

css - Firefox 中的 CSS 动画不流畅

问题描述

我有这个简单的加载指示器

https://jsfiddle.net/tcdLj0f9/

body {
  background: #1e263e;
}

.load {  
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.loadersp {
    border: 12px solid #f3f3f3;
    border-top: 12px solid #555!important;
    border-radius: 50%;
    width: 96px;
    height:96px;
    animation: sp-rotate 2s linear infinite;
}
@keyframes sp-rotate {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}
<div class="load">
  <div class="loadersp"></div>
</div>

它在 Chrome 中运行顺畅，而在 Firefox 中则无法运行（使用最新版本）.. 即使看着微调器的边缘，你也可以看到它们很粗糙，为什么会这样？我知道他们使用不同的渲染引擎，但我没想到会发生这样的事情。

那么有没有办法解决呢？

标签： css

解决方案

这看起来像一个 Firefox 错误。

如果您在position:fixed容器中使用动画iframe（如 jsfiddle 或 SO 片段），它会在 Firefox 中运行不稳定。从iframe它的工作顺利。

删除position:fixed修复它iframe：

body {
  background: #1e263e;
}

.load {
  display: flex;
  /* position: fixed; */
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.loadersp {
  border: 12px solid #f3f3f3;
  border-top: 12px solid #555 !important;
  border-radius: 50%;
  width: 96px;
  height: 96px;
  animation: sp-rotate 2s linear infinite;
}

@keyframes sp-rotate {
  0% {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(1turn)
  }
}
<div class="load">
  <div class="loadersp"></div>
</div>

推荐阅读