From 6372f293f3e38e0a5f81117a20794bd911d88b8d Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 12 Nov 2025 12:04:22 +0000
Subject: [PATCH] fix: maintain scroll position during zoom with proportional
 adjustment

When zooming, the page was moving up/down because the scroll position
wasn't being adjusted to account for the scale change.

Solution: Proportional scroll compensation
- Track old scale before applying new scale
- Calculate scale ratio (newScale / oldScale)
- Adjust scroll position: newScrollTop = oldScrollTop * scaleRatio

Example:
- At 100% zoom, scrolled to pixel 1000
- Zoom to 50%: content at pixel 1000 is now at pixel 500
- Adjust scroll to 500 to keep same content visible

Result:
- Page stays visually in the same place when zooming
- Content you're viewing remains stable
- No jumping or movement during zoom transitions
- Works at all zoom levels (50%-200%)
---
 static/js/main.js | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/static/js/main.js b/static/js/main.js
index d3886ab..cab7295 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -322,13 +322,29 @@
         const cvPaper = document.querySelector('.cv-paper');
         if (!cvPaper) return;
 
-        // Convert percentage to scale factor (100 = 1.0, 150 = 1.5, etc.)
-        const scaleFactor = zoomValue / 100;
+        // Get current scale to calculate ratio
+        const currentTransform = cvPaper.style.transform;
+        const currentScaleMatch = currentTransform.match(/scale\(([\d.]+)\)/);
+        const oldScale = currentScaleMatch ? parseFloat(currentScaleMatch[1]) : 1.0;
+
+        // Convert percentage to scale factor (100 = 1.0, 150 = 1.5, etc.)
+        const newScale = zoomValue / 100;
 
-        // Simple transform without scroll manipulation
-        // CSS transform-origin is set to "top center" so page scales from top
         requestAnimationFrame(() => {
-            cvPaper.style.transform = `scale(${scaleFactor})`;
+            // Store current scroll position
+            const oldScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+            // Apply the new scale
+            cvPaper.style.transform = `scale(${newScale})`;
+
+            // Calculate proportional scroll position to maintain visual position
+            // If zooming from 100% to 50%, content at pixel 1000 moves to pixel 500
+            // So we need to scroll to pixel 500 to see the same content
+            const scaleRatio = newScale / oldScale;
+            const newScrollTop = oldScrollTop * scaleRatio;
+
+            // Apply new scroll position to keep same content visible
+            window.scrollTo(0, newScrollTop);
 
             // Update display
             updateZoomDisplay(zoomValue);