CSS 抖动文本翻译

问题描述

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

will-change: transform;

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

这是一个问题的例子，你可以看到文字是一步一步跟随它的持有者，不是很顺利：

here

我也做了一个小codepen，看看效果：

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,0)";

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

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

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

感谢阅读我！

解决方法

CSS 过渡有助于使子像素动画更流畅。

transition: all 0.001s linear;

它在 chrome 上运行良好，但在 Firefox 上似乎不太有效。这篇文章可能有帮助： Firefox CSS Animation Smoothing (sub-pixel smoothing)

作为一种解决方法，您可以Math.round px 值。这将防止文本自行抖动（使整个包含 div 抖动）。

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 = Math.round(cx + Math.cos(angle) * radius);
    var py = Math.round(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>

will-change: contents;

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

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

javascript jitter transform translate3d