fix(seo): drop #root-seo on mount so it stops inflating page scroll

index.html ships a #root-seo div with prerendered SEO content (so crawlers
that don't run JS still index per-route copy). The inline CSS comment said
"React removes it on mount", but nothing actually removed it — so every
page kept a position:absolute, ~4096px-tall, visibility:hidden element
parked at top:0. That element does not paint, but it DOES contribute to
document.documentElement.scrollHeight.

Symptom: /admin, /docs, /:username and other short pages had a phantom
scroll roughly the size of the prerendered SEO body. Scrolling past the
real content showed a black band (just the body background) because there
was nothing visible to render down there. When tab content loaded with
more rows, the real content outgrew the phantom and the scrollbar "settled
in" — matching the user-reported symptom exactly.

Verified with puppeteer against velxio.dev:
  /dave:  documentElement.scrollHeight 4096 → expected ~800 after fix
  /admin: documentElement.scrollHeight 4096 → expected ~800 after fix
  /docs:  documentElement.scrollHeight 4096 → expected ~1161 after fix

The removal runs inside App's mount-effect, so it only fires after React
has actually committed — if App were to throw during render, the SEO
fallback would stay in the DOM as intended.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
David Montero Crespo 2026-05-14 12:52:12 -03:00
parent 530174f31e
commit a9200da631
1 changed files with 4 additions and 0 deletions

View File

@ -88,6 +88,10 @@ function App() {
useEffect(() => {
checkSession();
// #root-seo is a static SEO fallback in index.html (position:absolute,
// visibility:hidden). It still contributes to document scrollHeight, so
// every page got a phantom scroll the size of the prerendered SEO body.
document.getElementById('root-seo')?.remove();
}, []);
return (