OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Css jittery text translate

  • Thread starter Thread starter Durss
  • Start date Start date
D

Durss

Guest
[SOLUTION]
Solution is to use the will-change CSS property taht forces GPU rendering:

Code:
will-change: transform;

[ORIGINAL QUESTION]
I've been digging a lot internet and found no solution to a problem that seems rather simple which is, translating a holder containing text, and having this text moving smoothly.

Here is an example of the problem, you can see the text is following its holder step by step, not smoothly:

enter image description here

I also made a small codepen to see the effect live :

https://codepen.io/Durss/pen/ExgBzVJ?editors=1111


Code:
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();

Code:
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>

Basically, the problem is that the holder is moving at a subpixel level but the text position seems rounded no matter what i try. I used translate3d() so it uses GPU rendering which fixes the holder's displacement but not its text content.

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

I've seen here and there the following CSS "solutions" that didn't work for me:

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

I've had this problem many time in the past but always gave up fixing it,i think it's time to seek for help as a last bullet !

Thanks for reading me!

<p><strong>[SOLUTION]</strong><br />
Solution is to use the <code>will-change</code> CSS property taht forces GPU rendering:</p>
<pre class="lang-css prettyprint-override"><code>will-change: transform;
</code></pre>
<p><strong>[ORIGINAL QUESTION]</strong><br />
I've been digging a lot internet and found no solution to a problem that seems rather simple which is, translating a holder containing text, and having this text moving smoothly.</p>
<p>Here is an example of the problem, you can see the text is following its holder step by step, not smoothly:</p>
<p><a href="https://i.sstatic.net/8roKZ.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/8roKZ.gif" alt="enter image description here" /></a></p>
<p>I also made a small codepen to see the effect live :</p>
<p><a href="https://codepen.io/Durss/pen/ExgBzVJ?editors=1111" rel="nofollow noreferrer">https://codepen.io/Durss/pen/ExgBzVJ?editors=1111</a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div id="text">blah blah</div></code></pre>
</div>
</div>
</p>
<p>Basically, the problem is that the holder is moving at a subpixel level but the text position seems rounded no matter what i try.
I used translate3d() so it uses GPU rendering which fixes the holder's displacement but not its text content.</p>
<pre class="lang-js prettyprint-override"><code>div.style.transform = "translate3d("+px+"px, "+py+"px, 0)";
</code></pre>
<p>I've seen here and there the following CSS "solutions" that didn't work for me:</p>
<pre class="lang-css prettyprint-override"><code>text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-font-smoothing:none;
</code></pre>
<p>I've had this problem many time in the past but always gave up fixing it,i think it's time to seek for help as a last bullet !</p>
<p>Thanks for reading me!</p>
 

Latest posts

Online statistics

Members online
0
Guests online
1
Total visitors
1
Ads by Eonads
Top