From 597d59f3db606a00dd0a7dd728b7564c5f0e2e80 Mon Sep 17 00:00:00 2001 From: Jiminy Panoz Date: Tue, 15 Jul 2025 14:45:42 +0200 Subject: [PATCH 1/2] Improve Webkit scroll bugfix --- .../src/modules/snapper/ScrollSnapper.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/navigator-html-injectables/src/modules/snapper/ScrollSnapper.ts b/navigator-html-injectables/src/modules/snapper/ScrollSnapper.ts index c6f5daff..f1ed40b2 100644 --- a/navigator-html-injectables/src/modules/snapper/ScrollSnapper.ts +++ b/navigator-html-injectables/src/modules/snapper/ScrollSnapper.ts @@ -78,8 +78,13 @@ export class ScrollSnapper extends Snapper { // 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; + if (currentScroll > 1) { + this.doc().scrollTop = currentScroll - 1; + } else { + this.doc().scrollTop = currentScroll + 1; + } this.doc().scrollTop = currentScroll; + }); comms.register("go_progression", ScrollSnapper.moduleName, (data, ack) => { From 60235ff2b6e98ae2e7d745009b14bf062a488be0 Mon Sep 17 00:00:00 2001 From: Jiminy Panoz Date: Tue, 15 Jul 2025 16:00:50 +0200 Subject: [PATCH 2/2] Fix scroll progress for Android Depending on device pixel ratios, scrollTop ends up being rounded, and may actually never reach the scrollHeight of the document because of that. So the helper could not report we were at the scroll end, because the value was never 1. --- navigator-html-injectables/package.json | 2 +- .../src/modules/snapper/ColumnSnapper.ts | 2 ++ .../src/modules/snapper/ScrollSnapper.ts | 9 +++++++-- navigator/package.json | 2 +- 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/navigator-html-injectables/package.json b/navigator-html-injectables/package.json index 385c8df1..a2296056 100644 --- a/navigator-html-injectables/package.json +++ b/navigator-html-injectables/package.json @@ -1,6 +1,6 @@ { "name": "@readium/navigator-html-injectables", - "version": "2.0.0-beta.4", + "version": "2.0.0-beta.5", "type": "module", "description": "An embeddable solution for connecting frames of HTML publications with a Readium Navigator", "author": "readium", diff --git a/navigator-html-injectables/src/modules/snapper/ColumnSnapper.ts b/navigator-html-injectables/src/modules/snapper/ColumnSnapper.ts index 8f464ea7..0f245290 100644 --- a/navigator-html-injectables/src/modules/snapper/ColumnSnapper.ts +++ b/navigator-html-injectables/src/modules/snapper/ColumnSnapper.ts @@ -39,6 +39,8 @@ export class ColumnSnapper extends Snapper { } reportProgress() { + // Contrary to ScrollTop, Android slightly adds to scrollX + // So we do not need to round it up const scrollX = this.wnd.scrollX; const scrollWidth = this.cachedScrollWidth; const progress = Math.max(0, Math.min(1, scrollX / scrollWidth)); diff --git a/navigator-html-injectables/src/modules/snapper/ScrollSnapper.ts b/navigator-html-injectables/src/modules/snapper/ScrollSnapper.ts index f1ed40b2..20cfb6ae 100644 --- a/navigator-html-injectables/src/modules/snapper/ScrollSnapper.ts +++ b/navigator-html-injectables/src/modules/snapper/ScrollSnapper.ts @@ -20,10 +20,15 @@ export class ScrollSnapper extends Snapper { } private reportProgress() { - const scrollTop = this.doc().scrollTop; + // We have to round up the scroll position because + // Android may never reach 100% of the scroll height + // due to the way it rounds scrollTop… + const scrollTop = Math.ceil(this.doc().scrollTop); const scrollHeight = this.doc().scrollHeight; + const viewportHeight = this.wnd.innerHeight; const progress = Math.max(0, Math.min(1, scrollTop / scrollHeight)); - const viewportEnd = Math.max(0, Math.min(1, (scrollTop + this.wnd.innerHeight) / scrollHeight)); + const viewportEnd = Math.max(0, Math.min(1, (scrollTop + viewportHeight) / scrollHeight)); + this.comms.send("progress", { start: progress, end: viewportEnd diff --git a/navigator/package.json b/navigator/package.json index 0fdf05bc..86888ae2 100644 --- a/navigator/package.json +++ b/navigator/package.json @@ -1,6 +1,6 @@ { "name": "@readium/navigator", - "version": "2.0.0-beta.11", + "version": "2.0.0-beta.12", "type": "module", "description": "Next generation SDK for publications in Web Apps", "author": "readium",