Skip to content

Rule · Lint

overflow-x: hidden on html/body/root wrapper breaks position: sticky

lint/overflow-x-hidden-stickywarnvoid lintupdated

Why it matters

overflow-x: hidden turns the element into a scroll container, so every sticky descendant sticks to it instead of the viewport — sticky headers and TOCs silently stop sticking.

How to fix it

Use overflow-x: clip (overflow-x-clip), which hides overflow without creating a scroll container.

Example

tsx
<body className="overflow-x-clip">

References

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.