fixes CSS overflow edge cases (tested with several reflowable EPUBs, …

…notably the two that exhibit the exact opposite effect, see edrlab/thorium-reader#1535 (comment) )
readium · Mar 4, 2022 · 07a8c64 · 07a8c64
1 parent 8af8cb4
commit 07a8c64
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 14 deletions.
diff --git a/src/electron/common/readium-css-inject.ts b/src/electron/common/readium-css-inject.ts
@@ -182,7 +182,7 @@ export function readiumCSSSet(
     const docElement = documant.documentElement;
 
     if (messageJson.isFixedLayout) {
-        // docElement.style.overflow = "hidden";
+        // see visibilityMaskCssStyles
         docElement.classList.add(ROOT_CLASS_FIXED_LAYOUT);
         return; // exit early
     }
@@ -196,11 +196,15 @@ export function readiumCSSSet(
         removeAllCSS(documant);
         // removeAllCSSInline(documant);
 
-        if (messageJson.isFixedLayout) {
-            docElement.style.overflow = "hidden";
-        } else {
-            docElement.style.overflow = "auto";
-        }
+        // This is always false, see 'if (messageJson.isFixedLayout)' returned code branch, above
+        // if (messageJson.isFixedLayout) {
+        //     docElement.style.overflow = "hidden";
+        // } else {
+        //     docElement.style.overflow = "auto";
+        // }
+        // see https://github.com/edrlab/thorium-reader/issues/1535
+        // "auto" fails! ("revert", "inherit", etc. work)
+        // docElement.style.overflow = "visible";
 
         const toRemove: string[] = [];
         for (let i = 0; i < docElement.style.length; i++) {
@@ -330,11 +334,20 @@ export function readiumCSSSet(
     // readium-paged-on | readium-scroll-on
     docElement.style.setProperty("--USER__view",
         setCSS.paged ? "readium-paged-on" : "readium-scroll-on");
+
+    // see visibilityMaskCssStyles
     if (setCSS.paged) {
-        docElement.style.overflow = "hidden";
+        // see https://github.com/edrlab/thorium-reader/issues/1535
+        // docElement.style.overflow = "hidden";
+        // "auto" fails! ("revert", "inherit", etc. work)
+        // docElement.style.overflow = "visible";
+        // docElement.style.overflowX = "hidden";
+        // docElement.style.overflowY = "visible";
         docElement.classList.add(CLASS_PAGINATED);
     } else {
-        docElement.style.overflow = "auto";
+        // docElement.style.overflow = "auto";
+        // docElement.style.overflowX = "auto";
+        // docElement.style.overflowY = "auto";
         docElement.classList.remove(CLASS_PAGINATED);
     }
 
@@ -612,14 +625,15 @@ export function configureFixedLayout(
     if (innerWidth && innerHeight && width && height && isFixedLayout
         && documant && documant.documentElement && documant.body) {
 
-        // documant.documentElement.style.overflow = "hidden";
+        // see visibilityMaskCssStyles
         documant.documentElement.classList.add(ROOT_CLASS_FIXED_LAYOUT);
+        // documant.documentElement.style.overflow = "hidden";
+        // documant.body.style.overflow = "hidden";
+        // documant.body.style.margin = "0"; // 8px by default!
 
         // Many FXL EPUBs lack the body dimensions (only viewport meta)
         documant.body.style.width = width + "px";
         documant.body.style.height = height + "px";
-        documant.body.style.overflow = "hidden";
-        documant.body.style.margin = "0"; // 8px by default!
 
         if (isDEBUG_VISUALS(documant)) {
             debug("FXL width: " + width);

diff --git a/src/electron/common/styles.ts b/src/electron/common/styles.ts
@@ -702,10 +702,26 @@ export const ROOT_CLASS_INVISIBLE_MASK = "r2-visibility-mask-class";
 export const ROOT_CLASS_INVISIBLE_MASK_REMOVED = "r2-visibility-mask-removed-class";
 export const visibilityMaskCssStyles = `
 
+:root[style].${CLASS_PAGINATED}:not(.${ROOT_CLASS_FIXED_LAYOUT}),
+:root.${CLASS_PAGINATED}:not(.${ROOT_CLASS_FIXED_LAYOUT}) {
+    overflow: visible !important;
+}
+:root[style].${CLASS_PAGINATED}:not(.${ROOT_CLASS_FIXED_LAYOUT}) > body,
+:root.${CLASS_PAGINATED}:not(.${ROOT_CLASS_FIXED_LAYOUT}) > body {
+    overflow-x: hidden !important;
+    overflow-y: visible !important;
+}
+
 :root[style].${ROOT_CLASS_FIXED_LAYOUT},
 :root.${ROOT_CLASS_FIXED_LAYOUT} {
     overflow: hidden !important;
 }
+:root[style].${ROOT_CLASS_FIXED_LAYOUT} > body,
+:root.${ROOT_CLASS_FIXED_LAYOUT} > body {
+    overflow: hidden !important;
+    margin: 0 !important;
+}
+
 /*
 // This workaround fixes the issue of "bleeding" body background color due to scale+translate CSS 2D transform
 // https://github.com/edrlab/thorium-reader/issues/1529#issuecomment-900166745

diff --git a/src/electron/renderer/webview/highlight.ts b/src/electron/renderer/webview/highlight.ts
@@ -558,9 +558,6 @@ function ensureHighlightsContainer(win: IReadiumElectronWebviewWindow): HTMLElem
         // documant.documentElement.style.position = "relative";
         documant.body.style.position = "relative";
 
-        // see https://github.com/edrlab/thorium-reader/issues/1535
-        documant.body.style.overflow = "hidden";
-
         // documant.body.style.setProperty("position", "relative", "important");
 
         if (!bodyEventListenersSet) {