javascript - Css jittery text translate

Question

I've been digging a lot internet and found no solution to a problem that seems rather simple which is, translating a holder containing text, and having this text moving smoothly.

Here is an example of the problem, you can see the text is following its holder step by step, not smoothly:

I also made a small codepen to see the effect live :

https://codepen.io/Durss/pen/ExgBzVJ?editors=1111

var angle = 0;
var radius = 100;
function renderFrame() {
        requestAnimationFrame(renderFrame);
    var cx = document.documentElement.clientWidth / 2;
    var cy = document.documentElement.clientHeight / 2;
    var div = document.getElementById("text");
    var px = cx + Math.cos(angle) * radius;
    var py = cy + Math.sin(angle) * radius;
    angle += .001;
    div.style.transform = "translate3d("+px+"px, "+py+"px, 0)";
}

renderFrame();

body {
  background-color:black;
  width:100%;
  height:100%;
}

#text {
  position:absolute;
  left:0;
  top:0;
  border: 2px solid white;
  background-color: #2f9da7;
  padding: 10px;
  border-radius:20px;
  color: white;
  font-weight: bold;
}

<div id="text">blah blah</div>

question from:https://stackoverflow.com/questions/65893763/css-jittery-text-translate

Answer 1

CSS transitions help on making sub-pixels animations smoother.

transition: all 0.001s linear;

It works fine on chrome, but seems a bit less effective on firefox. This article may help : Firefox CSS Animation Smoothing (sub-pixel smoothing)