Why it matters
Animating width, height, top/left, margin or padding re-runs layout and paint on every frame; box-shadow on large elements repaints large areas. These animations drop frames on phones.
How to fix it
Animate transform and opacity instead (scale/translate), use clip-path or a pseudo-element's opacity for shadows, and grid-template-rows 0fr→1fr for accordions.
Example
/* before */ .bar { transition: width .3s }
/* after */ .bar { transform-origin: left; transition: transform .3s } .bar.on { transform: scaleX(1) }References
More smoothness rules
void smooth reports 13 rules in this category. How the page feels after it loads: dropped frames during a scripted scroll, long animation frames, INP of real clicks, shifts after input, animated layout properties, idle rAF loops and reduced-motion handling.
scroll-listener-nonpassiveNon-passive wheel/touch listenerinp-slowInteractions are slow to respond (INP)layout-shift-after-inputLayout shifts long after an interactionlayout-shift-on-scrollLayout shifts while scrollingtransition-alltransition: allwill-change-overusewill-change is applied too broadlyreduced-motion-ignoredAnimations keep running with prefers-reduced-motionraf-loop-idlerequestAnimationFrame loop runs while idle