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

fix: switch from CSS zoom to transform scale for unrestricted zoom range

Browse Source 
CSS zoom property had constraints preventing proper zoom beyond 100%.
Switched back to transform: scale() which provides true visual zoom
that can extend beyond viewport bounds at 100-200% range.
This commit is contained in:
juanatsap
2025-11-12 15:11:58 +00:00
parent 1c00421bd2
commit b34ef54048
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
@@ -351,15 +351,15 @@
const cvFooter = document.querySelector('.cv-footer'); const cvFooter = document.querySelector('.cv-footer');
if (!cvContainer) return; if (!cvContainer) return;
// Convert percentage to decimal (100 = 1.0, 50 = 0.5, etc.) // Convert percentage to scale factor (100 = 1.0, 150 = 1.5, etc.)
const zoomLevel = zoomValue / 100; const scale = zoomValue / 100;
requestAnimationFrame(() => { requestAnimationFrame(() => {
// Use CSS zoom property which affects actual layout space // Use transform: scale() for true visual zoom without constraints
// Unlike transform: scale(), zoom reduces document space at lower values // This allows zoom to extend beyond viewport at >100%
cvContainer.style.zoom = zoomLevel; cvContainer.style.transform = `scale(${scale})`;
if (cvFooter) { if (cvFooter) {
cvFooter.style.zoom = zoomLevel; cvFooter.style.transform = `scale(${scale})`;
} }
// Update display // Update display