Fix Webkit scroll issue

navigator-html-injectables/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator-html-injectables",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.4",
   "type": "module",
   "description": "An embeddable solution for connecting frames of HTML publications with a Readium Navigator",
   "author": "readium",

navigator-html-injectables/src/comms/keys.ts

@@ -40,5 +40,6 @@ export type CommsCommandKey =
     "unfocus" |
     "focus" |
     "activate" |
-    "shake";
+    "shake" |
+    "force_webkit_recalc";
 ;

navigator-html-injectables/src/helpers/document.ts

@@ -78,4 +78,20 @@ export function appendVirtualColumnIfNeeded(wnd: ReadiumWindow): boolean {
     }
 
     return virtualColsCount !== needed;
+}
+
+/**
+ * This forces a recalculation in WebKit browsers.
+ * It is needed in scroll mode to ensure that the content is scrollable.
+ * Webkit seems to find itself in some kind of limbo if we do not do that.
+ * It has everything correct but the scroll listener is non-functional, 
+ * unless you force a recalc or reflow.
+ * It is not needed in paginated mode.
+ */
+export function forceWebkitRecalc(wnd: ReadiumWindow) {
+    // Borrowed from APB themselves… 
+    const styleElement = wnd.document.createElement("style");
+    styleElement.appendChild(wnd.document.createTextNode("*{}"));
+    wnd.document.body.appendChild(styleElement);
+    wnd.document.body.removeChild(styleElement);
 }

navigator-html-injectables/src/modules/snapper/ScrollSnapper.ts

@@ -4,6 +4,7 @@ import { ReadiumWindow, deselect, findFirstVisibleLocator } from "../../helpers/
 import { ModuleName } from "../ModuleLibrary";
 import { Snapper } from "./Snapper";
 import { rangeFromLocator } from "../../helpers/locator";
+import { forceWebkitRecalc } from "../../helpers/document";
 
 const SCROLL_SNAPPER_STYLE_ID = "readium-scroll-snapper-style";
 
@@ -63,6 +64,18 @@ export class ScrollSnapper extends Snapper {
             passive: true
         });
 
+        comms.register("force_webkit_recalc", ScrollSnapper.moduleName, () => {
+            forceWebkitRecalc(this.wnd);
+
+            // We absolutely must do this because overflown content
+            // won’t be rendered if we do not trigger scroll… 
+            // Only the content at the start of the document, 
+            // whose height is the viewport height, will be rendered.
+            const currentScroll = this.doc().scrollTop;
+            this.doc().scrollTop = currentScroll + 1;
+            this.doc().scrollTop = currentScroll;
+        });
+
         comms.register("go_progression", ScrollSnapper.moduleName, (data, ack) => {
             const position = data as number;
 

navigator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0-beta.10",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",

navigator/src/epub/frame/FrameManager.ts

@@ -1,6 +1,7 @@
 import { Loader, ModuleName } from "@readium/navigator-html-injectables";
 import { FrameComms } from "./FrameComms";
 import { ReadiumWindow } from "../../../../navigator-html-injectables/types/src/helpers/dom";
+import { sML } from "../../helpers";
 
 
 export class FrameManager {
@@ -95,6 +96,11 @@ export class FrameManager {
                         this.frame.style.removeProperty("opacity");
                         this.frame.style.removeProperty("pointer-events");
                         this.hidden = false;
+
+                        if (sML.UA.WebKit) {
+                            this.comms?.send("force_webkit_recalc", undefined);
+                        }
+
                         res();
                     }
                     if(atProgress && atProgress > 0) {