Why it matters
Animating layout properties forces layout + paint on every frame on the main thread, so the animation drops frames under load and can shift surrounding content.
How to fix it
Animate transform and opacity instead (scale, translate, clip-path), use grid-template-rows: 0fr → 1fr for accordions, or motion's layout prop for size changes.
Example
@keyframes enter { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }References
More lint rules
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.
useeffect-fetchPage fetches its data in `useEffect`div-buttonClickable `<div>`/`<span>` without button semanticsdangerously-set-jsonld-unescapedJSON-LD injected with `JSON.stringify` without escaping `<`transition-all`transition: all` / `transition-all`outline-none-no-replacementFocus outline removed without a visible replacementscale-zero-entryElement enters from `scale(0)`scroll-timeline-no-fallbackBase rule hides an element; only an `@supports (animation-timeline: …)` block undoes itease-in-enter`ease-in` used for an entrance or hover