Rotate css animation glitchy in firefox

Question

I am trying to rotate a div with this dead-simple code:

<!DOCTYPE html>

<html>
<head>
<style>
.spinner {
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50%;
  border-bottom: 1px solid #f00;
  animation: rotate-bottom 1s linear infinite;
}

@keyframes rotate-bottom {
  from {
    transform: rotateX(30deg) rotateY(-60deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(30deg) rotateY(-60deg) rotateZ(360deg);
  }
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>

I created a jsfiddle using the code above: http://jsfiddle.net/zg8vdyns/1/

Everything works fine on Chrome and Internet Explorer. A red curved line rotates in an endless, smooth and steady loop. However, firefox (39.0) seems to have issues rendering the animation (both the windows and linux build). First, the spinning line is much shorter than it should be. Second, the animation keeps faltering intermittently (it is not smooth). This looks like a firefox bug. Does anyone have a deeper insight into this issue?

Btw I know I should probably prefix 'animation' and 'keyframes' with '-moz-' but that is not the issue here.

that curved red line is your `border-bottom`, remove the `border-bottom` and see it disappears. — Rohit Kumar, Jul 25 '15 at 04:34

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Your issue is half-pixel/sub-pixel rendering. Playing around and changing border-bottom: 1px solid #f00; to border-bottom: 3px solid #f00; shows that animation is ok, but the rendering is very different from other browser engines... From another answer here of StackOverflow: Firefox CSS Animation Smoothing (sub-pixel smoothing)

The rendering engines for each browser is obviously different. Firefox does not implement an anti-aliasing effect on CSS animations. This does not inherently make it better or worse, it just depends on what you are animating. Linear transitions can appear undesirably blurred in Chrome for example.

That said it appears what you would like to achieve is to have an anti-aliased/sub-pixel smoothed transitions. We can't change the way the engine renders but we can manipulate the animation to appear softer to the end user.

But, differently from the approach provided by the answer in the link, in your scenario I think that there is a easier way to make the rendering more equivalent: http://jsfiddle.net/zg8vdyns/7/

Adding border-left: 1px solid rgba(255, 0, 0, 0.7); will kinda "force" the rendering of the half-pixels/sub-pixels that FireFox doesn't naturally...

Update:

@joshin855 also give a great answer below: adding the property background:rgba(255,255,255,0.01); will kinda "force" the rendering of the half-pixels/sub-pixels too. Your solution is very nice... It only have the disadvantage of a filled circle which depending on the scenario may not be suitable, but the line animation seems even more equivalent than in my solution... So, it also may be a good solution.

score 1 · Answer 2 · answered Jul 25 '15 at 04:57

1

As far the line being a dot you can add background:white; or background:RGBA(255,255,255,.01); to the element which should fix the problem and make it look similar to other browsers. Sorry it's not a great answer just thought I would throw in my 2 cents.

.spinner {
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50%;
  border-bottom: 1px solid #f00;
  animation: rotate-bottom 1s linear infinite;
  background:RGBA(255,255,255,.01);

}

http://jsfiddle.net/fqqko0uv/2/

answered Jul 25 '15 at 04:57

blarmor

121
1
4

Your solution is very nice... It only have the disadvantage of a filled circle which depending on the scenario may not be suitable... But the line animation seems even more equivalent than in my solution. I'll add a reference to your approach in my answer :) – Vitox Jul 25 '15 at 06:42

Rotate css animation glitchy in firefox

2 Answers2