javascript - Css 抖动文本翻译

Question

[解决方案]
解决方案是使用 will-change CSS 属性强制 GPU 渲染:

will-change: transform;

[原始问题]
我在互联网上搜索了很多东西，但没有找到一个看起来相当简单的问题的解决方案，即翻译一个包含文本的 holder，并让这个文本顺利移动。

这里是问题的一个例子，你可以看到文本是一步步跟随它的持有者的，不是很流畅:

我还做了一个小codepen，现场看看效果:

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>

基本上，问题是支架在亚像素级别移动，但无论我尝试什么，文本位置似乎都是圆形的。 我使用了 translate3d()，所以它使用 GPU 渲染来修复支架的位移，而不是它的文本内容。

div.style.transform = "translate3d("+px+"px, "+py+"px, 0)";

我在这里和那里看到了以下对我不起作用的 CSS“解决方案”:

text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-font-smoothing:none;

我过去多次遇到这个问题，但总是放弃修复它，我认为是时候寻求帮助作为最后一颗子弹了!

感谢阅读我!

Answer 1

will-change: contents;

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

这必须在转换之前立即应用。