diff --git a/app/src/main/assets/viewer.css b/app/src/main/assets/viewer.css
index 48bf80a..05c4f4f 100644
--- a/app/src/main/assets/viewer.css
+++ b/app/src/main/assets/viewer.css
@@ -12,6 +12,8 @@ body {
 }
 
 #container {
+    --scale-factor: 1;
+
     width: 100%;
     height: 100%;
     display: grid;
diff --git a/app/src/main/assets/viewer.js b/app/src/main/assets/viewer.js
index f21b7c4..4d3a3d6 100644
--- a/app/src/main/assets/viewer.js
+++ b/app/src/main/assets/viewer.js
@@ -7,6 +7,7 @@ let pageRendering = false;
 let renderPending = false;
 let renderPendingZoom = 0;
 const canvas = document.getElementById('content');
+const container = document.getElementById("container");
 let orientationDegrees = 0;
 let zoomRatio = 1;
 let textLayerDiv = document.getElementById("text");
@@ -82,6 +83,7 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
 
                 textLayerDiv.replaceWith(cached.textLayerDiv);
                 textLayerDiv = cached.textLayerDiv;
+                container.style.setProperty("--scale-factor", newZoomRatio.toString());
             }
 
             pageRendering = false;
@@ -153,6 +155,7 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
                 if (useRender) {
                     textLayerDiv.replaceWith(newTextLayerDiv);
                     textLayerDiv = newTextLayerDiv;
+                    container.style.setProperty("--scale-factor", newZoomRatio.toString());
                 }
 
                 if (cache.length === maxCached) {