From 7c0773e8c38f21f8c3ab86c2647d941e963dadb8 Mon Sep 17 00:00:00 2001 From: Lakshman Date: Fri, 24 Jul 2026 04:22:38 -0500 Subject: [PATCH] Fix showcase footer scroll jitter --- .../showcase-shell.component.html | 22 ++-- .../showcase-shell.component.ts | 110 +----------------- showcase/angular/src/index.html | 71 ----------- showcase/angular/src/styles.scss | 7 +- tests/showcase-angular-foundation.test.js | 45 ++++--- 5 files changed, 40 insertions(+), 215 deletions(-) diff --git a/showcase/angular/src/app/layout/showcase-shell/showcase-shell.component.html b/showcase/angular/src/app/layout/showcase-shell/showcase-shell.component.html index 1c94fc5b2..3c67b43e5 100644 --- a/showcase/angular/src/app/layout/showcase-shell/showcase-shell.component.html +++ b/showcase/angular/src/app/layout/showcase-shell/showcase-shell.component.html @@ -65,12 +65,12 @@

Pages

- Home - About - Dashboard - Agents - Privacy - Support + Home + About + Dashboard + Agents + Privacy + Support

Project

@@ -78,17 +78,17 @@

Project

Issues Changelog BSL 1.1 License - Stats + Stats

Research

- Lattice - PhantomStream - Prometheus + Lattice + PhantomStream + Prometheus

Community

- Sitemaps + Sitemaps Discord X
diff --git a/showcase/angular/src/app/layout/showcase-shell/showcase-shell.component.ts b/showcase/angular/src/app/layout/showcase-shell/showcase-shell.component.ts index ddbad5b00..63118760f 100644 --- a/showcase/angular/src/app/layout/showcase-shell/showcase-shell.component.ts +++ b/showcase/angular/src/app/layout/showcase-shell/showcase-shell.component.ts @@ -1,14 +1,10 @@ import { Component, HostListener, OnDestroy, OnInit, inject } from '@angular/core'; -import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive, Scroll } from '@angular/router'; +import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router'; import { Subscription, filter } from 'rxjs'; import { APP_VERSION } from '../../core/seo/version'; import { ThemeService } from '../../core/theme.service'; import { LanguagePickerComponent } from '../language-picker/language-picker.component'; -const ROUTE_SCROLL_RESET_DELAYS_MS = [0, 50, 150, 350, 700]; -const PERSISTENT_ROUTE_SCROLL_RESET_DELAYS_MS = [0, 50, 150, 350, 700, 1500, 3000]; -const ROUTE_SCROLL_RESET_STORAGE_KEY = 'fsb-route-scroll-top'; - @Component({ selector: 'app-showcase-shell', standalone: true, @@ -24,7 +20,6 @@ export class ShowcaseShellComponent implements OnInit, OnDestroy { private readonly router = inject(Router); private readonly route = inject(ActivatedRoute); private routeSub?: Subscription; - private scrollResetTimers: number[] = []; readonly appVersion = APP_VERSION; mobileMenuOpen = false; @@ -39,34 +34,15 @@ export class ShowcaseShellComponent implements OnInit, OnDestroy { this.mobileMenuOpen = false; } - prepareRouteTopNavigation(): void { - this.markRouteTopNavigation(); - this.scrollToRouteTop(true); - } - ngOnInit(): void { this.updateShellMode(); - this.useManualBrowserScrollRestoration(); - this.routeSub = new Subscription(); - this.routeSub.add(this.router.events + this.routeSub = this.router.events .pipe(filter((event): event is NavigationEnd => event instanceof NavigationEnd)) - .subscribe(() => { - this.updateShellMode(); - this.scrollToRouteTopWhenNoFragment(); - })); - this.routeSub.add(this.router.events - .pipe(filter((event): event is Scroll => event instanceof Scroll)) - .subscribe((event) => { - if (!event.anchor) { - this.scrollToRouteTopWhenNoFragment(); - } - })); - this.scrollToRouteTopWhenNoFragment(); + .subscribe(() => this.updateShellMode()); } ngOnDestroy(): void { this.routeSub?.unsubscribe(); - this.clearScrollResetTimers(); } @HostListener('window:scroll') @@ -84,84 +60,4 @@ export class ShowcaseShellComponent implements OnInit, OnDestroy { this.closeMobileMenu(); } } - - private scrollToRouteTop(persistent = false): void { - if (typeof window === 'undefined' || typeof document === 'undefined') return; - - this.clearScrollResetTimers(); - this.resetWindowScroll(); - - const delays = persistent ? PERSISTENT_ROUTE_SCROLL_RESET_DELAYS_MS : ROUTE_SCROLL_RESET_DELAYS_MS; - for (const delayMs of delays) { - const timer = window.setTimeout(() => { - this.scrollResetTimers = this.scrollResetTimers.filter((id) => id !== timer); - window.requestAnimationFrame(() => this.resetWindowScroll()); - }, delayMs); - this.scrollResetTimers.push(timer); - } - } - - private scrollToRouteTopWhenNoFragment(): void { - const pendingRouteTopNavigation = this.consumeRouteTopNavigation(); - if (typeof window !== 'undefined' && window.location.hash && !pendingRouteTopNavigation) return; - this.scrollToRouteTop(pendingRouteTopNavigation); - } - - private resetWindowScroll(): void { - window.scrollTo(0, 0); - const scrollers = [ - document.scrollingElement, - document.documentElement, - document.body, - ].filter((scroller): scroller is Element => !!scroller); - - for (const scroller of scrollers) { - if (scroller instanceof HTMLElement) { - scroller.scrollTop = 0; - scroller.scrollLeft = 0; - } - } - } - - private clearScrollResetTimers(): void { - if (typeof window === 'undefined') return; - for (const timer of this.scrollResetTimers) { - window.clearTimeout(timer); - } - this.scrollResetTimers = []; - } - - private useManualBrowserScrollRestoration(): void { - if ( - typeof window === 'undefined' || - !window.history || - !('scrollRestoration' in window.history) - ) { - return; - } - - window.history.scrollRestoration = 'manual'; - } - - private markRouteTopNavigation(): void { - if (typeof window === 'undefined' || !window.sessionStorage) return; - try { - window.sessionStorage.setItem(ROUTE_SCROLL_RESET_STORAGE_KEY, '1'); - } catch { - // Ignore private-mode storage failures; the immediate scroll reset still runs. - } - } - - private consumeRouteTopNavigation(): boolean { - if (typeof window === 'undefined' || !window.sessionStorage) return false; - try { - const pending = window.sessionStorage.getItem(ROUTE_SCROLL_RESET_STORAGE_KEY) === '1'; - if (pending) { - window.sessionStorage.removeItem(ROUTE_SCROLL_RESET_STORAGE_KEY); - } - return pending; - } catch { - return false; - } - } } diff --git a/showcase/angular/src/index.html b/showcase/angular/src/index.html index a95d2d079..9d93b5524 100644 --- a/showcase/angular/src/index.html +++ b/showcase/angular/src/index.html @@ -19,78 +19,7 @@ } })(); - - diff --git a/showcase/angular/src/styles.scss b/showcase/angular/src/styles.scss index b0ee43fcc..2e404e4dd 100644 --- a/showcase/angular/src/styles.scss +++ b/showcase/angular/src/styles.scss @@ -73,7 +73,12 @@ html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: no-preference) { + html { + scroll-behavior: smooth; + } } body { diff --git a/tests/showcase-angular-foundation.test.js b/tests/showcase-angular-foundation.test.js index 64c8e0f4f..4cfd0e03f 100644 --- a/tests/showcase-angular-foundation.test.js +++ b/tests/showcase-angular-foundation.test.js @@ -165,20 +165,11 @@ assert( ); assert( - /event instanceof NavigationEnd/.test(shellComponentSource) && - /event instanceof Scroll/.test(shellComponentSource) && - /this\.scrollToRouteTop\(/.test(shellComponentSource) && - /!event\.anchor/.test(shellComponentSource) && - /window\.location\.hash/.test(shellComponentSource) && - /window\.history\.scrollRestoration = 'manual'/.test(shellComponentSource) && - /ROUTE_SCROLL_RESET_DELAYS_MS/.test(shellComponentSource) && - /PERSISTENT_ROUTE_SCROLL_RESET_DELAYS_MS/.test(shellComponentSource) && - /ROUTE_SCROLL_RESET_STORAGE_KEY/.test(shellComponentSource) && - /window\.setTimeout/.test(shellComponentSource) && - /window\.requestAnimationFrame/.test(shellComponentSource) && - /window\.scrollTo\(0,\s*0\)/.test(shellComponentSource) && - /scroller\.scrollTop = 0/.test(shellComponentSource), - 'showcase shell explicitly resets window scroll after late route navigation events' + /event instanceof NavigationEnd/.test(shellComponentSource) && + !/event instanceof Scroll/.test(shellComponentSource) && + !/(prepareRouteTopNavigation|scrollToRouteTop|resetWindowScroll|ROUTE_SCROLL_RESET|fsb-route-scroll-top)/.test(shellComponentSource) && + !/(window\.setTimeout|window\.requestAnimationFrame|window\.scrollTo|sessionStorage|scrollRestoration)/.test(shellComponentSource), + 'showcase shell delegates route scrolling exclusively to the Angular router' ); assert( @@ -203,14 +194,9 @@ assert( ); assert( - /initRouteScrollRestoration/.test(indexSource) && - /window\.history\.scrollRestoration = 'manual'/.test(indexSource) && - /window\.location\.hash/.test(indexSource) && - /fsb-route-scroll-top/.test(indexSource) && - /document\.addEventListener\('click'/.test(indexSource) && - /target\.closest\('footer a\[href\]'\)/.test(indexSource) && - /window\.setTimeout\(reset,\s*delays\[i\]\)/.test(indexSource), - 'index pre-bootstrap script disables browser scroll restoration and resets non-hash route loads to top' + !/(initRouteScrollRestoration|fsb-route-scroll-top|scheduleReset|target\.closest\('footer a\[href\]'\))/.test(indexSource) && + !/(window\.scrollTo|window\.setTimeout|window\.history\.scrollRestoration)/.test(indexSource), + 'index bootstrap does not install a competing route-scroll owner' ); const themeBootstrapIndex = indexSource.indexOf("window.matchMedia('(prefers-color-scheme: dark)'"); @@ -240,9 +226,18 @@ assert( ); assert( - /prepareRouteTopNavigation\(\): void/.test(shellComponentSource) && - (shellTemplateSource.match(/\(click\)="prepareRouteTopNavigation\(\)"/g) || []).length >= 11, - 'footer internal router links reset scroll before route navigation starts' + (shellTemplateSource.match(/= 23 && + !/\(click\)="prepareRouteTopNavigation\(\)"/.test(shellTemplateSource), + 'footer internal links remain plain router links without imperative scroll handlers' +); + +const reducedMotionMediaIndex = globalStylesSource.indexOf('@media (prefers-reduced-motion: no-preference)'); +const smoothScrollIndex = globalStylesSource.indexOf('scroll-behavior: smooth'); +assert( + reducedMotionMediaIndex !== -1 && + smoothScrollIndex > reducedMotionMediaIndex && + /@media\s*\(prefers-reduced-motion:\s*no-preference\)\s*\{[\s\S]*?html\s*\{[\s\S]*?scroll-behavior:\s*smooth;[\s\S]*?\}/.test(globalStylesSource), + 'smooth scrolling is enabled only when reduced motion is not requested' ); assert(