Index2: Significant lag on scroll

[DougInAMug]

Interestingly, does not seem present on mobile view...

borgscrolllag-2026-07-03_11.28.18.mp4

(New design looks nice by the way!)

[ThomasWaldmann]

@DougInAMug I can't reproduce the lag here on my macbook - either it is too fast or I don't have enough pixels, not sure.

• https://www.borgbackup.org/index2.html - unchanged, should lag
• https://www.borgbackup.org/index3.html - should lag less?

Can you compare these 2, reproduce the lag with index2.html, check if the lag is gone with index3.html.

[ThomasWaldmann]

analysis by claude fable 5:

Root cause

The lag is not caused by JavaScript. The three.js scene boots parked (nothing renders until "Engage!" is clicked), and profiling a scripted full-page scroll shows the main thread far below budget (avg ~8 ms/frame). What remains is per-frame GPU raster/compositing work whose cost scales with window size — which is exactly why large desktop windows lag while mobile does not. The page stacked four such costs:

1. backdrop-filter: blur(10px) on the fixed header. Content scrolls behind it, so the browser must re-render the blurred backdrop on every scrolled frame. This is the classic scroll-jank pattern, particularly expensive in Firefox and on machines without strong GPU acceleration.
2. More backdrop-filter panels that scroll (the two terminal panels, the chat window, the footer). A scrolling element's backdrop shifts every frame, forcing a per-frame re-blur for each one visible.
3. The full-viewport fixed CRT/scanline overlay used mix-blend-mode: multiply. Blend modes defeat simple compositor-driven scrolling and force a full-viewport blend each frame in several browsers.
4. A 5-layer stacked text-shadow scrim on most headings/leads. Each shadow layer rasterizes the glyphs again, and the cost is multiplied while the scroll-triggered entrance animations run.

What was done (in index3.html)

To allow interactive side-by-side testing, index2.html is left untouched and the fixes live in an otherwise identical copy, index3.html. All changes are CSS-only and visually near-identical:

• Dropped backdrop-filter on the header, footer, terminal panels and chat window; compensated with slightly more opaque backgrounds.
• Removed mix-blend-mode: multiply from the CRT overlay — its gradients are pure black-with-alpha, so normal alpha compositing looks the same without the per-frame blend.
• Trimmed the text scrim from 5 stacked shadows to 2 (one tight, one soft), still legible over the animated scene.
• Removed a will-change that kept 24 elements permanently layer-promoted for a run-once animation.

@DougInAMug once this is deployed, could you compare /index2.html (unchanged) against /index3.html (fixed) on the machine that showed the lag, and report back? Knowing your browser/OS/GPU would also help confirm the diagnosis.