txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: simplify zoom to prevent empty space issues

Browse Source 
The viewport-centered zoom approach was creating empty space above
the content when zooming to 50%, causing the CV to move down.

Solution: Simple top-anchored zoom
- Removed all complex scroll compensation logic
- Set transform-origin to "top center" (fixed position)
- Page now scales naturally from the top without movement
- No dynamic transform-origin calculations
- No scroll position adjustments

Result:
- Page stays anchored at top during zoom
- No empty space created above content
- Clean, predictable zoom behavior
- Works correctly at all zoom levels (50%-200%)

The page simply scales up/down from the top center point,
maintaining its position without any jumping or space issues.
This commit is contained in:
juanatsap
2025-11-12 12:03:01 +00:00
parent fce7d7b27e
commit b5d0d8389b
2 changed files with 6 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+2 -2
View File
@@ -551,8 +551,8 @@ iconify-icon {
min-height: auto; /* Changed from 100vh */
/* Zoom transform properties */
transform-origin: center center; /* Default origin, dynamically updated by JS to viewport center */
transition: transform 0.08s linear, transform-origin 0s; /* Smooth zoom, instant origin change */
transform-origin: top center; /* Scale from top center - page stays anchored at top */
transition: transform 0.08s linear; /* Smooth, immediate zoom response */
will-change: transform; /* Hint browser to optimize for transforms */
}
static/js/main.js
+4 -30
View File
@@ -322,39 +322,13 @@
const cvPaper = document.querySelector('.cv-paper');
if (!cvPaper) return;
// Get current scale from the element (if any)
const currentTransform = cvPaper.style.transform;
const currentScaleMatch = currentTransform.match(/scale\(([\d.]+)\)/);
const currentScale = currentScaleMatch ? parseFloat(currentScaleMatch[1]) : 1.0;
// Convert percentage to scale factor (100 = 1.0, 150 = 1.5, etc.)
const newScale = zoomValue / 100;
const scaleFactor = zoomValue / 100;
// Zoom from the center of the viewport (user's current viewing position)
// Simple transform without scroll manipulation
// CSS transform-origin is set to "top center" so page scales from top
requestAnimationFrame(() => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const viewportHeight = window.innerHeight;
// Calculate the point in the page that's at the center of the viewport
const viewportCenter = scrollTop + (viewportHeight / 2);
// Calculate the percentage of the page height where the viewport center is
const pageHeight = cvPaper.scrollHeight;
const centerPercent = (viewportCenter / pageHeight) * 100;
// Set transform-origin to the viewport center so zoom happens from where you're looking
cvPaper.style.transformOrigin = `center ${centerPercent}%`;
// Apply transform
cvPaper.style.transform = `scale(${newScale})`;
// Adjust scroll to keep the same content at viewport center
// The content position scales with the zoom, so adjust accordingly
const scaleRatio = newScale / currentScale;
const newViewportCenter = viewportCenter * scaleRatio;
const newScrollTop = newViewportCenter - (viewportHeight / 2);
window.scrollTo(0, newScrollTop);
cvPaper.style.transform = `scale(${scaleFactor})`;
// Update display
updateZoomDisplay(zoomValue);