Skip to main content

Text subpixel rendering

Chrome will by default always render text to align it with the closest pixel.
That means that a text with margin-top: 10px and margin-top: 10.4px will be rendered identically.

This leads to an oscillation effect can make your animations less smooth and more jarring.

To counter this effect, you can render your text with:

  • A transform property
  • An additional perspective() transform
  • A willChange: "transform" CSS property

Notice the difference in this 200x100 video:


Left side of the video
tsx
<div
  style={{
    transform: 'translateY(' + interpolate(frame, [0, 200], [0, 50]) + 'px)',
  }}
>
  hi there
</div>
Right side of the video
tsx
<div
  style={{
    transform: 'perspective(100px) translateY(' + interpolate(frame, [0, 200], [0, 50]) + 'px)',
    willChange: 'transform',
  }}
>
  hi there
</div>

Consider using this optimization only during rendering as excessive will-change: transform will use more resources.