CSS animation not smoothly in Firefox

问题

I have this simple loading indicator

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>

It works smoothly in Chrome whereas not in Firefox(using latest).. even looking at the edges of the spinner as you can see they are rough, why that? I know they use different rendering engines but I didn't expect such thing to happen.

So is there a way to fix for it?

回答1:

This looks like a Firefox bug.

If you're using animation in position:fixed container within iframe (like jsfiddle or SO snippet) it runs choppy in Firefox. Out of iframe it works smoothly.

Removing position:fixed fixes it in 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>

来源：https://stackoverflow.com/questions/54486441/css-animation-not-smoothly-in-firefox

标签

css