Subpixel rendering

Summary

Fractional pixels cause blurry text/lines when elements land on half-pixel boundaries (transforms, zoom, retina scaling). Round dimensions; use transform from integer positions. devicePixelRatio affects canvas and image sharpness. Layout shift from subpixel rounding contributes to CLS.

Code example

function snapToPixel(value) {
  const dpr = window.devicePixelRatio || 1;
  return Math.round(value * dpr) / dpr;
}

element.style.transform = `translate3d(${snapToPixel(x)}px, 0, 0)`;

Key points

• Fractional pixels cause blurry text/lines when elements land on half-pixel boundaries (transforms, zoom, retina scaling).
• Round dimensions; use transform from integer positions.
• devicePixelRatio affects canvas and image sharpness.
• Layout shift from subpixel rounding contributes to CLS.

Further reading

• devicePixelRatio
• Subpixel rendering

Related concepts

• Render waterfalls
• Detached DOM nodes