如何解决CSS 抖动文本翻译
[解决方案]
解决方案是使用 will-change
CSS 属性强制 GPU 渲染:
will-change: transform;
[原始问题]
我已经在互联网上挖掘了很多东西,但没有找到一个看起来相当简单的问题的解决方案,即翻译包含文本的持有人,并使文本顺利移动。
这是一个问题的例子,你可以看到文字是一步一步跟随它的持有者,不是很顺利:
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;
解决了我自己在进行变换旋转时出现的抖动文本问题。这告诉浏览器元素的内容预计会发生变化,因此不应缓存。
这必须在转换之前立即应用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。