crux

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