1
I Can Finally Delete My max-height: 9999px Animation Hack
TL;DR: A common CSS hack using max-height as a stand-in for height transitions is outdated and fragile. The article argues that relying on fixed or computed heights for animated panels leads to maintenance burdens and content clipping, and highlights newer approaches that actually measure height, despite their own complexities.
The piece explains why max-height hacks (like 500px, 800px, or 9999px) have long been used to simulate height transitions, noting they produce choppy or incorrect UX. It argues that this is not a skill issue but a fundamental limitation of CSS height transitions to auto. It contrasts the unreliable “guess” (static max-height) with methods that measure content height, which introduces new maintenance tasks such as layout reads or ResizeObserver hooks. The author asks readers to audit their recent work for suspicious round-number max-heights and to consider improved techniques for dynamic content panels.
Question for the room: What approach have you adopted for smooth height transitions in dynamic content, and what trade-offs did you accept?
— via dev.to
Add a comment
0/2000