fix: unnecessary scrollbars when zoom is fit-to-screen

- fix: #1158
vivliostyle · Apr 5, 2023 · bb504a6 · bb504a6
1 parent 8803acc
commit bb504a6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/packages/core/src/vivliostyle/assets.ts b/packages/core/src/vivliostyle/assets.ts
@@ -31,6 +31,7 @@ export const VivliostyleViewportScreenCss = `
   }
 
   [data-vivliostyle-viewer-viewport] {
+    box-sizing: border-box;
     display: flex;
     overflow: auto;
     position: relative;

diff --git a/packages/core/src/vivliostyle/vgen.ts b/packages/core/src/vivliostyle/vgen.ts
@@ -2906,8 +2906,16 @@ export class Viewport {
     this.outerZoomBox = outerZoomBox as HTMLElement;
     this.contentContainer = contentContainer as HTMLElement;
     this.layoutBox = layoutBox as HTMLElement;
-    this.width = opt_width || this.root.offsetWidth || window.innerWidth;
-    this.height = opt_height || this.root.offsetHeight || window.innerHeight;
+    this.width =
+      opt_width ||
+      parseFloat(window.getComputedStyle(this.root).width) ||
+      this.root.offsetWidth ||
+      window.innerWidth;
+    this.height =
+      opt_height ||
+      parseFloat(window.getComputedStyle(this.root).height) ||
+      this.root.offsetHeight ||
+      window.innerHeight;
 
     // Use the fallbackPageSize if window size is 0 or browser is in headless mode.
     const fallbackPageSize = {