Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Firefox paints decdn.org before the stylesheet applies on reload

Aperta
  • Qualcosa non va?
#331 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
1-2 giorni
Idoneità per principianti
54/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
next.js, react, typescript
Ambito
frontend, performance

Direzione di ricerca

Start by reproducing the reload in Firefox with the console open and follow the “Layout was forced” warning to the responsible script. Inspect Chrome.tsx and its layout reads, then retry in a private window or Troubleshoot Mode to check for extension involvement. Done means identifying the cause and confirming reloads no longer show an unstyled paint.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug

Symptom

On reload in Firefox (Linux), decdn.org shows the page fully unstyled for ~250 ms (three frames of a ~12 fps screen recording) before the CSS applies: serif text, bulleted nav and drawer lists, default blue links. Before #330 this also drew the hero's litepaper icon at full container width as a blue block. #330 made the icons harmless, but the unstyled paint itself remains.

Confirmed

  • In the user's recording, frames before the first styled frame show the raw HTML with no stylesheet applied (wordmark <img> not yet painted either).
  • The stylesheet is a single render-blocking <link rel="stylesheet" href="/_next/static/chunks/….css" data-precedence="next"> in <head>, served text/css, allowed by the CSP.

Not reproduced

  • Headless Chromium (Playwright, chromium-1234), cold and throttled (300 ms latency, 200 KB/s), 1440×900 and 390×844: screencast frames go blank → styled with nothing in between.
  • Playwright Firefox (firefox-1511), cold load and prime-then-reload, with the CSS response held 1.5 s: no unstyled paint and no requestAnimationFrame tick sees unstyled layout. The paint waits for the CSS.
  • document.getAnimations() at load shows only the intended entrance animations. The mobile drawer's overlay and panel (prerendered since #324) do not animate on load.

Hypotheses (unconfirmed)

  1. A script forces layout before the CSS lands. This is Firefox's documented FOUC trigger. The console warns "Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content." Async scripts are not held back by a pending stylesheet the way parser-blocking ones are. On reload the JS chunks can be ready before the CSS revalidation round-trip completes. Candidates that read layout on mount: Chrome.tsx (navRef.current.offsetHeight, window.innerHeight, window.scrollY), plus anything in Next's bootstrap.
  2. A browser extension (content script running at document_start or document_idle) forcing layout. That would also explain why clean Playwright profiles don't reproduce it.

Next steps

  • Reload decdn.org in Firefox with the console open and check for the "Layout was forced" warning; it links to the script responsible.
  • Retry in a private window or Troubleshoot Mode (extensions off).
  • If it's our code: defer the layout read until after load, or until document.styleSheets is complete.

Related: shortening the window by caching hashed assets as immutable (#332).

Lingua principale
TypeScript
Stelle
3
Fork
0
Merge medio
12h 41m
PR unite (30g)
70

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di decdn/website

Tutte le issue di decdn/website

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.