Skip to content

Rule · Lint

Canvas/WebGL renders with a literal devicePixelRatio: 2 (or width * 2)

lint/hardcoded-device-pixel-ratioinfovoid lintupdated

Why it matters

Magic UI globe hardcodes DPR 2: on DPR-1 screens that is 4× the pixels to shade every frame, and on DPR-3 phones it is blurry. GPU cost scales with pixel count.

How to fix it

Use Math.min(window.devicePixelRatio, 1.5) (read in an effect, never at module scope) and resize on ResizeObserver.

Example

ts
const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
canvas.width = Math.round(width * dpr);

void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.