Fix misaligned EPUB navigator

CHANGELOG.md

@@ -23,6 +23,7 @@ All notable changes to this project will be documented in this file. Take a look
 * Fixed several issues with the EPUB navigator cursor and pointer events.
     * Fixed the cursor shape on iPadOS when using a physical trackpad or mouse.
     * Fixed multiple tap events broadcasted while running on macOS.
+* [#449](https://github.com/readium/swift-toolkit/issues/449) Fixed misaligned EPUB navigator when it does not span the full screen width.
 
 
 ## [3.2.0]

Sources/Navigator/EPUB/Scripts/src/utils.js

@@ -25,22 +25,28 @@ window.addEventListener(
 window.addEventListener(
   "load",
   function () {
+    var pendingResize;
     const observer = new ResizeObserver(() => {
-      appendVirtualColumnIfNeeded();
-      onScroll();
-    });
-    observer.observe(document.body);
+      if (pendingResize) {
+        window.cancelAnimationFrame(pendingResize);
+      }
 
-    // on page load
-    window.addEventListener("orientationchange", function () {
-      orientationChanged();
-      snapCurrentPosition();
+      pendingResize = window.requestAnimationFrame(function () {
+        onViewportWidthChanged();
+        onScroll();
+      });
     });
-    orientationChanged();
+    observer.observe(document.body);
   },
   false
 );
 
+function onViewportWidthChanged() {
+  viewportWidth = window.innerWidth;
+  appendVirtualColumnIfNeeded();
+  snapCurrentPosition();
+}
+
 /**
  * Having an odd number of columns when displaying two columns per screen causes snapping and page
  * turning issues. To fix this, we insert a blank virtual column at the end of the resource.
@@ -72,7 +78,7 @@ function appendVirtualColumnIfNeeded() {
 var last_known_scrollX_position = 0;
 var last_known_scrollY_position = 0;
 var ticking = false;
-var maxScreenX = 0;
+var viewportWidth = 0;
 
 // Position in range [0 - 1].
 function update(position) {
@@ -122,13 +128,6 @@ document.addEventListener(
   })
 );
 
-function orientationChanged() {
-  maxScreenX =
-    window.orientation === 0 || window.orientation == 180
-      ? screen.width
-      : screen.height;
-}
-
 export function getColumnCountPerScreen() {
   return parseInt(
     window
@@ -155,16 +154,16 @@ export function scrollToId(id) {
 
 // Position must be in the range [0 - 1], 0-100%.
 export function scrollToPosition(position, dir) {
-  console.log("ScrollToPosition");
   if (position < 0 || position > 1) {
-    console.log("InvalidPosition");
+    console.error(
+      `Expected a valid progression in scrollToPosition, got ${position}`
+    );
     return;
   }
 
   if (isScrollModeEnabled()) {
     let offset = document.scrollingElement.scrollHeight * position;
     document.scrollingElement.scrollTop = offset;
-    // window.scrollTo(0, offset);
   } else {
     var documentWidth = document.scrollingElement.scrollWidth;
     var factor = dir == "rtl" ? -1 : 1;
@@ -236,7 +235,7 @@ function scrollToOffset(offset) {
 function snapOffset(offset) {
   var value = offset + 1;
 
-  return value - (value % maxScreenX);
+  return value - (value % viewportWidth);
 }
 
 function snapCurrentPosition() {