From eac47338a03eb587a557d332c722eac1f6e85201 Mon Sep 17 00:00:00 2001
From: Antonio Ledebuhr <info@antoniolede.de>
Date: Wed, 21 Jan 2026 08:29:03 +0100
Subject: [PATCH] mobile jumping background fix

---
 .../dot-background/dot-background.scss        |  1 +
 .../dot-background/dot-background.ts          | 35 +++++++++++--------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/app/components/dot-background/dot-background.scss b/src/app/components/dot-background/dot-background.scss
index 84e7420..b11af7f 100644
--- a/src/app/components/dot-background/dot-background.scss
+++ b/src/app/components/dot-background/dot-background.scss
@@ -6,4 +6,5 @@ canvas {
 
   width: 100vw;
   height: 100vh;
+  height: 100svh;
 }
diff --git a/src/app/components/dot-background/dot-background.ts b/src/app/components/dot-background/dot-background.ts
index dc3817e..d040e10 100644
--- a/src/app/components/dot-background/dot-background.ts
+++ b/src/app/components/dot-background/dot-background.ts
@@ -20,6 +20,10 @@ export class DotBackground implements OnDestroy {
   private readonly COLORS = ['#6366f1', '#8b5cf6', '#a855f7', '#3b82f6'];
   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) {
     afterNextRender(() => {
       this.init();
@@ -49,24 +53,27 @@ export class DotBackground implements OnDestroy {
 
   private resize = () => {
     const canvas = this.canvasRef.nativeElement;
-    const viewport = window.visualViewport;
+    const width = window.innerWidth;
+    const height = window.innerHeight;
 
-    if (viewport) {
-      // Modern browsers
-      canvas.width = Math.round(viewport.width * viewport.scale);
-      canvas.height = Math.round(viewport.height * viewport.scale);
-    } else {
-      // Fallback
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
+    const widthChanged = width !== this.lastWidth;
+    const heightDiff = Math.abs(height - this.lastHeight);
+    const significantHeightChange = heightDiff > this.RESIZE_THRESHOLD;
+
+    // Only resize on width change or significant height change (orientation flip, not browser chrome)
+    if (!widthChanged && !significantHeightChange && this.lastWidth !== 0) {
+      return;
     }
 
-    // Clamp dots to new bounds
+    this.lastWidth = width;
+    this.lastHeight = height;
+
+    canvas.width = width;
+    canvas.height = height;
+
     for (const dot of this.dots) {
-      dot.x = Math.min(dot.x, canvas.width - dot.radius);
-      dot.y = Math.min(dot.y, canvas.height - dot.radius);
-      dot.x = Math.max(dot.x, dot.radius);
-      dot.y = Math.max(dot.y, dot.radius);
+      dot.x = Math.max(dot.radius, Math.min(width - dot.radius, dot.x));
+      dot.y = Math.max(dot.radius, Math.min(height - dot.radius, dot.y));
     }
   };