Merge pull request #15930 from calixteman/15929

Move --scale-factor variable in the viewer container (fix #15929)

web/pdf_page_view.js

@@ -36,7 +36,6 @@ import {
 import {
   approximateFraction,
   DEFAULT_SCALE,
-  docStyle,
   OutputScale,
   RendererType,
   RenderingStates,
@@ -206,7 +205,7 @@ class PDFPageView {
     ) {
       // Ensure that the various layers always get the correct initial size,
       // see issue 15795.
-      docStyle.setProperty(
+      container?.style.setProperty(
         "--scale-factor",
         this.scale * PixelsPerInch.PDF_TO_CSS_UNITS
       );
@@ -562,7 +561,10 @@ class PDFPageView {
         PDFJSDev.test("!PRODUCTION || GENERIC")) &&
       this._isStandalone
     ) {
-      docStyle.setProperty("--scale-factor", this.viewport.scale);
+      this.div.parentNode?.style.setProperty(
+        "--scale-factor",
+        this.viewport.scale
+      );
     }
 
     if (

web/pdf_viewer.css

@@ -23,7 +23,6 @@
   --page-margin: 1px auto -8px;
   --page-border: 9px solid transparent;
   --spreadHorizontalWrapped-margin-LR: -3.5px;
-  --scale-factor: 1;
   --loading-icon-delay: 400ms;
 }
 
@@ -47,6 +46,10 @@
 }
 
 .pdfViewer {
+  /* Define this variable here and not in :root to avoid to reflow all the UI
+     when scaling (see #15929). */
+  --scale-factor: 1;
+
   padding-bottom: var(--pdfViewer-padding-bottom);
 }
 

web/pdf_viewer.js

@@ -758,7 +758,7 @@ class PDFViewer {
         });
         // Ensure that the various layers always get the correct initial size,
         // see issue 15795.
-        docStyle.setProperty("--scale-factor", viewport.scale);
+        this.viewer.style.setProperty("--scale-factor", viewport.scale);
 
         for (let pageNum = 1; pageNum <= pagesCount; ++pageNum) {
           const pageView = new PDFPageView({
@@ -1093,7 +1093,7 @@ class PDFViewer {
       return;
     }
 
-    docStyle.setProperty(
+    this.viewer.style.setProperty(
       "--scale-factor",
       newScale * PixelsPerInch.PDF_TO_CSS_UNITS
     );