Javascript Css抖动文本翻译

[解决方案]
解决方案是使用

将更改
CSS属性以强制GPU渲染：

将更改：转换；

[原始问题]

我在互联网上翻了很多遍，却没有找到一个看似简单的问题的解决办法，那就是翻译一个包含文本的支架，让文本流畅地移动

下面是一个问题示例，您可以看到文本正在一步一步地跟随其持有者，而不是平稳地：


我还制作了一个小代码笔，以现场观看效果：



var角度=0；
var半径=100；
函数renderFrame（）{
requestAnimationFrame（renderFrame）；
var cx=document.documentElement.clientWidth/2；
var cy=document.documentElement.clientHeight/2；
var div=document.getElementById（“文本”）；
var px=cx+数学cos（角度）*半径；
var py=cy+数学sin（角度）*半径；
角度+=.001；
div.style.transform=“translate3d（“+px+”px，“+py+”px，0）”；
}
renderFrame（）
正文{
背景色：黑色；
宽度：100%；
身高：100%；
}
#正文{
位置：绝对位置；
左：0；
排名：0；
边框：2倍纯白；
背景色：#2f9da7；
填充：10px；
边界半径：20px；
颜色：白色；
字体大小：粗体；
}
blah blah
作为一种解决方法，您可以
Math.round
px值。这将防止文本本身抖动（使整个包含div的部分抖动）


var角度=0；
var半径=100；
函数renderFrame（）{
requestAnimationFrame（renderFrame）；
var cx=document.documentElement.clientWidth/2；
var cy=document.documentElement.clientHeight/2；
var div=document.getElementById（“文本”）；
var px=数学圆（cx+数学cos（角度）*半径）；
var py=数学圆（cy+数学正弦（角度）*半径）；
角度+=.001；
div.style.transform=“translate3d（“+px+”px，“+py+”px，0）”；
}
renderFrame（）
正文{
背景色：黑色；
宽度：100%；
身高：100%；
}
#正文{
位置：绝对位置；
左：0；
排名：0；
边框：2倍纯白；
背景色：#2f9da7；
填充：10px；
边界半径：20px；
颜色：白色；
字体大小：粗体；
}
blah blah
CSS变换有助于使子像素动画更平滑

transition: all 0.001s linear;

它在chrome上运行良好，但在firefox上似乎有点不太有效。
本文可能有助于：

解决了我自己在进行变换旋转时出现的文本抖动问题。这会告诉浏览器，元素的内容可能会更改，因此不应缓存

这必须在转换之前立即应用。
问题在于时间元素实际上是文本。而浏览器正试图通过使其尽可能清晰地降为亚像素来为您优化它。好!！但你不想这样。您是否尝试在SVG元素中使用文本？也许浏览器不会优化SVG。（对不起，如果我自己没有试过的话）好主意，但它不会改变任何东西：/Btw；解决方案是在画布中呈现文本，并在支架中显示该画布。作为位图的画布可能有利于亚像素渲染，但是…来吧。。。现在是2021年，我希望我能避免这样的混乱^^ ^位置的四舍五入确实会使持有者及其文本同步移动，但整个持有者会抖动，而不仅仅是文本，对我来说，更糟糕的是：/
will-change: contents;