defalt2111/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile jumping background fix

Browse Source
This commit is contained in:
Antonio Ledebuhr
2026-01-21 08:29:03 +01:00
parent 258433e6c2
commit eac47338a0
2 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/components/dot-background/dot-background.scss
View File

@@ -6,4 +6,5 @@ canvas {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
height: 100svh;
} }

35
src/app/components/dot-background/dot-background.ts
View File

@@ -20,6 +20,10 @@ export class DotBackground implements OnDestroy {
private readonly COLORS = ['#6366f1', '#8b5cf6', '#a855f7', '#3b82f6']; private readonly COLORS = ['#6366f1', '#8b5cf6', '#a855f7', '#3b82f6'];
private readonly MOUSE_RADIUS = 150; private readonly MOUSE_RADIUS = 150;
private lastWidth = 0;
private lastHeight = 0;
private readonly RESIZE_THRESHOLD = 100; // ignore small height changes (browser chrome)
constructor(private ngZone: NgZone) { constructor(private ngZone: NgZone) {
afterNextRender(() => { afterNextRender(() => {
this.init(); this.init();
@@ -49,24 +53,27 @@ export class DotBackground implements OnDestroy {
private resize = () => { private resize = () => {
const canvas = this.canvasRef.nativeElement; const canvas = this.canvasRef.nativeElement;
const viewport = window.visualViewport; const width = window.innerWidth;
const height = window.innerHeight;
if (viewport) { const widthChanged = width !== this.lastWidth;
// Modern browsers const heightDiff = Math.abs(height - this.lastHeight);
canvas.width = Math.round(viewport.width * viewport.scale); const significantHeightChange = heightDiff > this.RESIZE_THRESHOLD;
canvas.height = Math.round(viewport.height * viewport.scale);
} else { // Only resize on width change or significant height change (orientation flip, not browser chrome)
// Fallback if (!widthChanged && !significantHeightChange && this.lastWidth !== 0) {
canvas.width = window.innerWidth; return;
canvas.height = window.innerHeight;
} }
// Clamp dots to new bounds this.lastWidth = width;
this.lastHeight = height;
canvas.width = width;
canvas.height = height;
for (const dot of this.dots) { for (const dot of this.dots) {
dot.x = Math.min(dot.x, canvas.width - dot.radius); dot.x = Math.max(dot.radius, Math.min(width - dot.radius, dot.x));
dot.y = Math.min(dot.y, canvas.height - dot.radius); dot.y = Math.max(dot.radius, Math.min(height - dot.radius, dot.y));
dot.x = Math.max(dot.x, dot.radius);
dot.y = Math.max(dot.y, dot.radius);
} }
}; };