diff --git a/static/css/main.css b/static/css/main.css
index 85b0a65..72f4be5 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2592,7 +2592,6 @@ html {
     z-index: 99;
     transition: all 0.3s ease;
     opacity: 0.2;
-    zoom: 1; /* Prevent zoom inheritance */
 }
 
 .back-to-top:hover {
@@ -2644,7 +2643,6 @@ html {
     z-index: 99;
     transition: all 0.3s ease;
     opacity: 0.2;
-    zoom: 1; /* Prevent zoom inheritance */
 }
 
 .info-button:hover {
diff --git a/static/js/main.js b/static/js/main.js
index 7324ec7..ad16680 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -354,9 +354,14 @@
         const zoomLevel = zoomValue / 100;
 
         requestAnimationFrame(() => {
-            // Use CSS zoom on wrapper - changes actual layout space
-            // Footer will naturally follow right after the zoomed content
-            zoomWrapper.style.zoom = zoomLevel;
+            // Use transform scale for true zoom that extends beyond viewport
+            zoomWrapper.style.transform = `scale(${zoomLevel})`;
+            zoomWrapper.style.transformOrigin = 'top center';
+
+            // Adjust wrapper height to account for scale
+            // This ensures the footer appears at the correct position
+            const originalHeight = zoomWrapper.scrollHeight;
+            zoomWrapper.style.marginBottom = `${originalHeight * (zoomLevel - 1)}px`;
 
             // Update display
             updateZoomDisplay(zoomValue);