Css перевод нервного текста ⇐ CSS

[Anonymous]

[РЕШЕНИЕ]

Решение состоит в использовании свойства CSS will-change, которое обеспечивает рендеринг с помощью графического процессора:

Код: Выделить всё

will-change: transform;

[ИСХОДНЫЙ ВОПРОС]

Я много копался в Интернете и не нашел решения проблемы, которая кажется довольно простой, но это перевод держателя, содержащего текст, и плавное перемещение этого текста.
Вот пример проблемы: вы можете видеть, что текст следует за своим держателем шаг за шагом, а не плавно:


Я также сделал небольшой код, чтобы увидеть эффект вживую:
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 ... -translate