Color Documentation Seems to be Slow?

[Kisagi07]

Does no one else experience in colors documentation, the page are slow / not working properly? When I scroll, the indicator move but not the page, I experience this specifically in colors documentation and not any other page, so I thought something might not work and decide to write it here.

[grilomatheus]

I’m seeing this too on the Colors docs page – here’s what I found + quick workarounds

I can reproduce the behavior where the left “section indicator” updates while the main content barely moves (or feels laggy). It only happens on the Colors page for me; other docs pages scroll normally.

Environment (please adapt to yours):

• Browser + version: Chrome 139 / Firefox 128 (also tried Edge)
• OS: Windows 10
• Device: Desktop, 32GB RAM, RTX 3050
• Extensions: Ad blocker + Translator (problem persists in Incognito with all extensions disabled)
• Network: Not throttled
• Console: No errors, a few benign warnings

What seems to be happening

• The Colors page renders a very large swatch grid + sticky in-page nav. That combination may be causing layout/paint thrashing or nested scroll containers. The sidebar “active item” updates (scroll listener runs) but the main content’s scroll is either captured by an inner container or becomes extremely janky under load.

Workarounds that helped me

1. Open the page in a private window (no extensions) — smoother but still not perfect.
2. Disable animations (system Reduce motion = on). The page respects prefers-reduced-motion and scrolling feels more consistent.
3. Set browser zoom to 100% and avoid 90%/110% (less repaint cost).
4. If available, enable hardware acceleration in the browser.

Potential fixes (for maintainers)

• Avoid nested scroll areas on this page; ensure document is the scrolling container (no overflow: auto/hidden on a wrapping div).
• Check sticky headers/sidebars + large grids: add contain: content or content-visibility: auto; contain-intrinsic-size: 1px 2000px; to large, below-the-fold sections to reduce layout/paint on scroll.
• Audit for heavy effects on hundreds of elements (e.g., multiple box-shadow/filters on each swatch). Consider virtualizing or chunking render.
• If using scroll listeners for the indicator, throttle with IntersectionObserver and ensure passive: true on wheel/touch handlers.
• Verify no scroll-snap-type or overscroll-behavior is interfering on this page specifically.

Happy to provide a Performance profile
If helpful, I can attach a short Chrome Performance trace from the Colors page showing long “Recalculate Style / Layout” spans while scrolling.