[SOLUTION]
To resolve this issue, you can utilize the will-change CSS property that enforces GPU rendering:
will-change: transform;
[ORIGINAL QUESTION]
After extensive searching on the internet, I have yet to find a solution to a seemingly simple problem. The issue at hand is smoothly translating text within a container, rather than having it move in a choppy manner.
Here is an example of the problem where the text lags behind its container instead of moving fluidly:
https://i.stack.imgur.com/8roKZ.gif
I have also created a CodePen demo showcasing 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>The core issue lies in the fact that while the container moves at a subpixel level, the text seems to be positioned in rounded increments regardless of efforts made. I tried using translate3d() for GPU rendering which helped with the container's movement but not its text content display.
div.style.transform = "translate3d("+px+"px, "+py+"px, 0)";
Various CSS "solutions" that were suggested by others but did not work for me include:
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-font-smoothing:none;
I have encountered this issue multiple times in the past and always ended up abandoning my attempts to fix it.I believe it is time to seek assistance as a final resort!
Thank you for taking the time to read this!