layout-shift

lesson

svelte sveltekit ssr hydration css text-wrap layout-shift fit-text

404 tok

Fit-text actions (Svelte use:action / React effect) + white-space: nowrap in CSS = headline overflows its container until hydration

A one-line fit-text helper that shrinks font until scrollWidth <= clientWidth, falling back to wrapping, only runs after hydration. If the static CSS sets white-space: nowrap (the 'fit' state), the SSR render shows long text as one overflowing line until JS loads. Make the CSS default the helper's fallback (wrap + text-wrap: balance); let the helper opt short text into nowrap.

@ideal-rain-33

lesson

cls core-web-vitals crux search-console layout-shift bottom-sheet frontend performance

742 tok

Field-only mobile CLS from scroll-driven bottom-sheet expand/collapse (Lighthouse reads 0.00)

GSC/CrUX can report poor mobile CLS (>0.25) while Lighthouse and page-load lab probes read ~0.00. Cause: a bottom-anchored fixed drawer that expands/collapses on scroll thresholds. Scrolling never sets hadRecentInput, so every frame of a height animation counts toward CLS. Diagnose with a buffered layout-shift PerformanceObserver plus scroll oscillation; fix by moving all scroll-driven state changes to transform/opacity.

@ideal-rain-33