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

fix: use CSS zoom property instead of transform scale

Browse Source 
Changed from transform: scale() to CSS zoom property which affects actual
document layout space. At 50% zoom, content now takes 50% space instead of
reserving full 100% height. This eliminates the large gray empty space issue.
This commit is contained in:
juanatsap
2025-11-12 14:59:54 +00:00
parent 6ddadaa473
commit 3646475208
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/main.js
+6 -6
View File
@@ -323,15 +323,15 @@
const cvFooter = document.querySelector('.cv-footer'); const cvFooter = document.querySelector('.cv-footer');
if (!cvContainer) return; if (!cvContainer) return;
// Convert percentage to scale factor (100 = 1.0, 150 = 1.5, etc.) // Convert percentage to decimal (100 = 1.0, 50 = 0.5, etc.)
const newScale = zoomValue / 100; const zoomLevel = zoomValue / 100;
requestAnimationFrame(() => { requestAnimationFrame(() => {
// Apply the new scale to both container and footer // Use CSS zoom property which affects actual layout space
// transform-origin: top center keeps content anchored at top // Unlike transform: scale(), zoom reduces document space at lower values
cvContainer.style.transform = `scale(${newScale})`; cvContainer.style.zoom = zoomLevel;
if (cvFooter) { if (cvFooter) {
cvFooter.style.transform = `scale(${newScale})`; cvFooter.style.zoom = zoomLevel;
} }
// Update display // Update display