Как я могу сгладить тряску при 3D-переводе текста на основе CSS? ⇐ CSS

[Anonymous]

Я много копался в Интернете и не нашел решения проблемы, которая кажется довольно простой, а именно перевода держателя, содержащего текст, и обеспечения плавного перемещения этого текста.
Вот является примером проблемы, вы можете видеть, что текст следует за держателем шаг за шагом, а не плавно:
[img]https:/ /i.sstatic.net/8roKZ.gif[/img]

Я также сделал демо-версию 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;
}
blah blah



По сути, проблема в том, что держатель перемещается на субпиксельном уровне, но позиция текста кажется округленной, что бы я ни пытался.
Я использовал Translate3d(), поэтому он использует рендеринг графического процессора, который фиксирует смещение держателя, но не его текстовое содержимое.
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;


Подробнее здесь: https://stackoverflow.com/questions/658 ... ranslation