@readium/navigator 2.6.1 → 2.7.0-alpha.1

package/src/epub/fxl/FXLFrameManager.ts

@@ -1,13 +1,14 @@
 import { Loader, ModuleName } from "@readium/navigator-html-injectables";
 import { Page, ReadingProgression } from "@readium/shared";
 import { FrameComms } from "../frame/FrameComms.ts";
-import { FXLPeripherals } from "./FXLPeripherals.ts";
+import { FXLPeripherals, isTypedOMSupported } from "./FXLPeripherals.ts";
 import type { ReadiumWindow } from "../../../../navigator-html-injectables/types/src/helpers/dom";
 import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator.ts";
 import { KeyboardConditionBridge } from "../../peripherals/KeyboardConditionBridge.ts";
 
 export class FXLFrameManager {
     private frame: HTMLIFrameElement;
+    private frameIsAppended = false;
     private loader: Loader | undefined;
     public source: string;
     private comms: FrameComms | undefined;
@@ -22,6 +23,7 @@ export class FXLFrameManager {
     public debugHref: string;
     private loadPromise: Promise<Window> | undefined;
     private showPromise: Promise<void> | undefined;
+    private viewportSize: { width: number, height: number } | undefined = undefined;
 
     constructor(
         peripherals: FXLPeripherals,
@@ -41,7 +43,7 @@ export class FXLFrameManager {
         this.frame.classList.add("blank");
         this.frame.scrolling = "no";
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.display = "none";
         this.frame.style.position = "absolute";
         this.frame.style.pointerEvents = "none";
@@ -52,15 +54,17 @@ export class FXLFrameManager {
         this.frame.dataset.originalHref = debugHref;
         this.source = "about:blank";
 
-        // NEW
         this.wrapper = document.createElement("div");
         this.wrapper.style.position = "relative";
+        this.wrapper.style.contain = "strict";
         this.wrapper.style.float = this.wrapper.style.cssFloat = direction === ReadingProgression.rtl ? "right" : "left";
-
-        this.wrapper.appendChild(this.frame);
     }
 
     async load(modules: ModuleName[], source: string): Promise<Window> {
+        if(!this.frameIsAppended) {
+            this.wrapper.appendChild(this.frame);
+            this.frameIsAppended = true;
+        }
         if(this.source === source && this.loadPromise/* && this.loaded*/) {
             if([...this.currModules].sort().join("|") === [...modules].sort().join("|")) {
                 return this.loadPromise;
@@ -106,6 +110,7 @@ export class FXLFrameManager {
 
     // Parses the page size from the viewport meta tag of the loaded resource.
     loadPageSize(): { width: number, height: number } {
+        if(this.viewportSize) return this.viewportSize;
         const wnd = this.frame.contentWindow!;
 
         // Try to get the page size from the viewport meta tag
@@ -122,8 +127,10 @@ export class FXLFrameManager {
                 else if(match[1] === "height")
                     height = Number.parseFloat(match[2]);
             }
-            if(width > 0 && height > 0)
-                return { width, height };
+            if(width > 0 && height > 0) {
+                this.viewportSize = { width, height };
+                return this.viewportSize;
+            }
         }
 
         // Otherwise get it from the size of the loaded content
@@ -136,25 +143,47 @@ export class FXLFrameManager {
     update(page?: Page) {
         if(!this.loaded) return;
         const dimensions = this.loadPageSize();
-        this.frame.style.height = `${dimensions.height}px`;
-        this.frame.style.width = `${dimensions.width}px`;
         const ratio = Math.min(this.wrapper.clientWidth / dimensions.width, this.wrapper.clientHeight / dimensions.height);
-        this.frame.style.transform = `scale(${ratio})`;
+        if(isTypedOMSupported()) {
+            this.frame.attributeStyleMap.set("width", CSS.px(dimensions.width));
+            this.frame.attributeStyleMap.set("height", CSS.px(dimensions.height));
+            this.frame.attributeStyleMap.set("transform", new CSSTransformValue([
+                new CSSScale(ratio, ratio),
+            ]));
+        } else {
+            this.frame.style.height = `${dimensions.height}px`;
+            this.frame.style.width = `${dimensions.width}px`;
+            this.frame.style.transform = `scale(${ratio})`;
+        }
         const bcr = this.frame.getBoundingClientRect();
         const hdiff = this.wrapper.clientHeight - bcr.height;
-        this.frame.style.top = `${hdiff / 2}px`;
-        if(page === Page.left) {
-            const wdiff = this.wrapper.clientWidth - bcr.width;
-            this.frame.style.left = `${wdiff}px`;
-        } else if(page === Page.center) {
-            const wdiff = this.wrapper.clientWidth - bcr.width;
-            this.frame.style.left = `${wdiff / 2}px`;
+
+        if(isTypedOMSupported()) {
+            this.frame.attributeStyleMap.set("top", CSS.px(hdiff / 2));
+            if(page === Page.left) {
+                const wdiff = this.wrapper.clientWidth - bcr.width;
+                this.frame.attributeStyleMap.set("left", CSS.px(wdiff));
+            } else if(page === Page.center) {
+                const wdiff = this.wrapper.clientWidth - bcr.width;
+                this.frame.attributeStyleMap.set("left", CSS.px(wdiff / 2));
+            } else {
+                this.frame.attributeStyleMap.set("left", CSS.px(0));
+            }
         } else {
-            this.frame.style.left = "0px";
+            this.frame.style.top = `${hdiff / 2}px`;
+            if(page === Page.left) {
+                const wdiff = this.wrapper.clientWidth - bcr.width;
+                this.frame.style.left = `${wdiff}px`;
+            } else if(page === Page.center) {
+                const wdiff = this.wrapper.clientWidth - bcr.width;
+                this.frame.style.left = `${wdiff / 2}px`;
+            } else {
+                this.frame.style.left = "0px";
+            }
         }
 
         this.frame.style.removeProperty("visibility");
-        this.frame.style.removeProperty("aria-hidden");
+        this.frame.ariaHidden = null;
         this.frame.style.removeProperty("pointer-events");
         this.frame.classList.remove("blank");
         this.frame.classList.add("loaded");
@@ -171,7 +200,7 @@ export class FXLFrameManager {
         if(!this.loaded) return;
         this.deselect();
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.pointerEvents = "none";
         this.frame.classList.add("blank");
         this.frame.classList.remove("loaded");
@@ -189,6 +218,8 @@ export class FXLFrameManager {
             this.source = "about:blank";
             this.frame.contentWindow!.location.replace("about:blank");
             this.frame.style.display = "none";
+            this.frame.style.width = "0px";
+            this.frame.style.height = "0px";
         });
     }
 
@@ -296,15 +327,27 @@ export class FXLFrameManager {
     }
 
     set width(width: number) {
-        const newWidth = `${width}%`;
-        if(this.wrapper.style.width === newWidth) return;
-        this.wrapper.style.width = newWidth;
+        if(isTypedOMSupported()) {
+            const current = this.wrapper.attributeStyleMap.get("width");
+            if(current instanceof CSSUnitValue && current.unit === "percent" && current.value === width) return;
+            this.wrapper.attributeStyleMap.set("width", CSS.percent(width));
+        } else {
+            const newWidth = `${width}%`;
+            if(this.wrapper.style.width === newWidth) return;
+            this.wrapper.style.width = newWidth;
+        }
     }
 
     set height(height: number) {
-        const newHeight = `${height}px`;
-        if(this.wrapper.style.height === newHeight) return;
-        this.wrapper.style.height = newHeight;
+        if(isTypedOMSupported()) {
+            const current = this.wrapper.attributeStyleMap.get("height");
+            if(current instanceof CSSUnitValue && current.unit === "px" && current.value === height) return;
+            this.wrapper.attributeStyleMap.set("height", CSS.px(height));
+        } else {
+            const newHeight = `${height}px`;
+            if(this.wrapper.style.height === newHeight) return;
+            this.wrapper.style.height = newHeight;
+        }
     }
 
     get window() {

package/src/epub/fxl/FXLFramePoolManager.ts

@@ -1,9 +1,9 @@
 import { ModuleName } from "@readium/navigator-html-injectables";
-import { Locator, Publication, ReadingProgression, Page, Link } from "@readium/shared";
+import { Locator, Publication, ReadingProgression, Page, Link, Layout } from "@readium/shared";
 import { FrameCommsListener } from "../frame/index.ts";
-import FrameBlobBuider from "../frame/FrameBlobBuilder.ts";
+import FrameBlobBuilder from "../frame/FrameBlobBuilder.ts";
 import { FXLFrameManager } from "./FXLFrameManager.ts";
-import { FXLPeripherals } from "./FXLPeripherals.ts";
+import { FXLPeripherals, isTypedOMSupported } from "./FXLPeripherals.ts";
 import { FXLSpreader, Orientation, Spread } from "./FXLSpreader.ts";
 import { VisualNavigatorViewport, IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator.ts";
 import { Injector } from "../../injection/Injector.ts";
@@ -21,7 +21,7 @@ export class FXLFramePoolManager {
     private readonly container: HTMLElement;
     private readonly positions: Locator[];
     private readonly pool: Map<string, FXLFrameManager> = new Map();
-    private readonly blobs: Map<string, string> = new Map();
+    private readonly blobs: Map<string, FrameBlobBuilder> = new Map();
     private readonly inprogress: Map<string, Promise<void>> = new Map();
     private readonly delayedShow: Map<string, Promise<void>> = new Map();
     private readonly delayedTimeout: Map<string, number> = new Map();
@@ -37,7 +37,7 @@ export class FXLFramePoolManager {
     private readonly pub: Publication;
     public width: number = 0;
     public height: number = 0;
-    private transform: string = "";
+    private transform: number | undefined;
     public currentSlide: number = 0;
     private spreader: FXLSpreader;
     private spread = true; // TODO
@@ -52,6 +52,7 @@ export class FXLFramePoolManager {
         container: HTMLElement,
         positions: Locator[],
         pub: Publication,
+        _layout: Layout, // TODO: used by upcoming scrolled-layout support
         injector?: Injector | null,
         contentProtectionConfig?: IContentProtectionConfig,
         keyboardPeripheralsConfig?: IKeyboardPeripheralsConfig,
@@ -66,7 +67,7 @@ export class FXLFramePoolManager {
 
         if(this.pub.metadata.effectiveReadingProgression !== ReadingProgression.rtl && this.pub.metadata.effectiveReadingProgression !== ReadingProgression.ltr)
             // TODO support TTB and BTT
-            throw Error("Unsupported reading progression for EPUB");
+            throw Error("Unsupported reading progression for fixed-layout EPUB");
 
         // NEW
         this.spreader = new FXLSpreader(this.pub);
@@ -86,16 +87,18 @@ export class FXLFramePoolManager {
 
         this.peripherals = new FXLPeripherals(this);
 
+        const fragment = document.createDocumentFragment();
         this.pub.readingOrder.items.forEach((link) => {
             // Create <iframe>
             const fm = new FXLFrameManager(this.peripherals, this.pub.metadata.effectiveReadingProgression, link.href, this.contentProtectionConfig, this.keyboardPeripheralsConfig);
-            this.spineElement.appendChild(fm.element);
 
-            // this.pages.push(fm);
             this.pool.set(link.href, fm);
             fm.width = 100 / this.length * (link.properties?.otherProperties["orientation"] === Orientation.landscape || link.properties?.otherProperties["addBlank"] ? this.perPage : 1);
             fm.height = this.height;
+            fragment.appendChild(fm.wrapper);
         });
+        this.spineElement.appendChild(fragment);
+
     }
 
     private _listener!: FrameCommsListener;
@@ -134,15 +137,18 @@ export class FXLFramePoolManager {
 
         clearTimeout(this.resizeTimeout);
         this.resizeTimeout = window.setTimeout(() => {
-            // TODO optimize this expensive set of loops and operations
+            const baseWidthFactor = 100 / this.length;
+            const itemLookup = new Map(this.pub.readingOrder.items.map(item => [item.href, item]));
             this.pool.forEach((frm, linkHref) => {
-                let i = this.pub.readingOrder.items.findIndex(l => l.href === linkHref);
-                const link = this.pub.readingOrder.items[i];
-                frm.width = 100 / this.length * (link.properties?.otherProperties["orientation"] === Orientation.landscape || link.properties?.otherProperties["addBlank"] ? this.perPage : 1);
-                frm.height = this.height;
-                if(!frm.loaded) return;
-                const spread = this.spreader.findByLink(link)!;
-                frm.update(this.spreadPosition(spread, link));
+                const link = itemLookup.get(linkHref);
+                if(!link) return;
+                requestAnimationFrame(() => {
+                    frm.width = baseWidthFactor * (link.properties?.otherProperties["orientation"] === Orientation.landscape || link.properties?.otherProperties["addBlank"] ? this.perPage : 1);
+                    frm.height = this.height;
+                    if(!frm.loaded) return;
+                    const spread = this.spreader.findByLink(link)!;
+                    frm.update(this.spreadPosition(spread, link));
+                });
             });
         }, RESIZE_UPDATE_TIMEOUT);
     }
@@ -181,25 +187,42 @@ export class FXLFramePoolManager {
     }
 
     public updateSpineStyle(animate: boolean, fast = true) {
-        let margin = "0";
+        let margin = 0;
         this.updateDimensions();
         if(this.perPage > 1 && true) // this.shift
-            margin = `${this.width / 2}px`;
-
-        const spineStyle = {
-            transition: animate ? `all ${fast ? SLIDE_FAST : SLIDE_SLOW}ms ease-out` : "all 0ms ease-out",
-            marginRight: this.rtl ? margin : "0",
-            marginLeft: this.rtl ? "0" : margin,
-            width: `${(this.width / this.perPage) * this.length}px`,
-            transform: this.transform,
-
-            // Static (should be moved to CSS)
-            contain: "content"
-        } as CSSStyleDeclaration;
-
-        Object.assign(this.spineElement.style, spineStyle);
+            margin = this.width / 2;
+
+        if(isTypedOMSupported()) {
+            // TODO: don't use UnparsedValue, but rather the longhand of every transition property
+            this.spineElement.attributeStyleMap.set("transition", new CSSUnparsedValue([animate ? `all ${fast ? SLIDE_FAST : SLIDE_SLOW}ms ease-out` : "all 0ms ease-out"]));
+            this.spineElement.attributeStyleMap.set("margin-right", CSS.px(this.rtl ? margin : 0));
+            this.spineElement.attributeStyleMap.set("margin-left", CSS.px(this.rtl ? 0 : margin));
+            this.spineElement.attributeStyleMap.set("width", CSS.px((this.width / this.perPage) * this.length));
+            this.transform ? this.spineElement.attributeStyleMap.set("transform", new CSSTransformValue([
+                new CSSTranslate(CSS.px(this.transform || 0), CSS.px(0), CSS.px(0))
+            ])) : this.spineElement.attributeStyleMap.delete("transform");
+            this.spineElement.attributeStyleMap.set("contain", new CSSUnparsedValue(["content"]));
+        } else {
+            const spineStyle = {
+                transition: animate ? `all ${fast ? SLIDE_FAST : SLIDE_SLOW}ms ease-out` : "all 0ms ease-out",
+                marginRight: this.rtl ? `${margin}px` : "0",
+                marginLeft: this.rtl ? "0" : `${margin}px`,
+                width: `${(this.width / this.perPage) * this.length}px`,
+                transform: this.transform ? `translate3d(${this.transform}px, 0px, 0px)` : "",
+                // Static (should be moved to CSS)
+                contain: "content"
+            } as CSSStyleDeclaration;
+            Object.assign(this.spineElement.style, spineStyle);
+        }
     }
 
+    // Reused typed transform for the per-event zoom/pan write: allocating
+    // fresh CSSTransformValue objects per write is slower than string
+    // parsing; mutating a persistent one is faster than both
+    private bookScale: CSSScale | null = null;
+    private bookTranslate: CSSTranslate | null = null;
+    private bookTransform: CSSTransformValue | null = null;
+
     public updateBookStyle(initial=false) {
         if(initial) {
             const bookStyle = {
@@ -218,7 +241,23 @@ export class FXLFramePoolManager {
             } as CSSStyleDeclaration;
             Object.assign(this.bookElement.style, bookStyle);
         }
-        this.bookElement.style.transform = `scale(${this.peripherals?.scale || 1})` + (this.peripherals ? ` translate3d(${this.peripherals.pan.translateX}px, ${this.peripherals.pan.translateY}px, 0px)` : "");
+        const scale = this.peripherals?.scale || 1;
+        const translateX = this.peripherals?.pan.translateX || 0;
+        const translateY = this.peripherals?.pan.translateY || 0;
+        if(isTypedOMSupported()) {
+            if(!this.bookTransform) {
+                this.bookScale = new CSSScale(1, 1);
+                this.bookTranslate = new CSSTranslate(CSS.px(0), CSS.px(0), CSS.px(0));
+                this.bookTransform = new CSSTransformValue([this.bookScale, this.bookTranslate]);
+            }
+            (this.bookScale!.x as CSSUnitValue).value = scale;
+            (this.bookScale!.y as CSSUnitValue).value = scale;
+            (this.bookTranslate!.x as CSSUnitValue).value = translateX;
+            (this.bookTranslate!.y as CSSUnitValue).value = translateY;
+            this.bookElement.attributeStyleMap.set("transform", this.bookTransform);
+        } else {
+            this.bookElement.style.transform = `scale(${scale}) translate3d(${translateX}px, ${translateY}px, 0px)`;
+        }
     }
 
     /**
@@ -282,22 +321,22 @@ export class FXLFramePoolManager {
      */
     slideToCurrent(enableTransition?: boolean, fast = true) {
         this.updateDimensions();
+        // Always commit: the spine transform may have been written directly
+        // by the peripherals during a drag (snap-back relies on this), and
+        // reading style.transform back as a string for comparison doesn't
+        // match under CSS Typed OM (its serialization differs).
         if (enableTransition) {
             // This one is tricky, I know but this is a perfect explanation:
             // https://youtu.be/cCOL7MC4Pl0
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
-                    const newTransform = `translate3d(${this.offset}px, 0, 0)`;
-                    if(this.spineElement.style.transform === newTransform) return;
-                    this.transform = newTransform;
+                    this.transform = this.offset;
                     this.updateSpineStyle(true, fast);
                     this.deselect();
                 });
             });
         } else {
-            const newTransform = `translate3d(${this.offset}px, 0, 0)`;
-            if(this.spineElement.style.transform === newTransform) return;
-            this.transform = newTransform;
+            this.transform = this.offset;
             this.updateSpineStyle(false);
             this.deselect();
         }
@@ -305,10 +344,10 @@ export class FXLFramePoolManager {
 
     bounce(rtl = false) {
         requestAnimationFrame(() => {
-            this.transform = `translate3d(${this.offset+(50 * (rtl ? 1 : -1))}px, 0, 0)`;
+            this.transform = this.offset + (50 * (rtl ? 1 : -1));
             this.updateSpineStyle(true, true);
             setTimeout(() => {
-                this.transform = `translate3d(${this.offset}px, 0, 0)`;
+                this.transform = this.offset;
                 this.updateSpineStyle(true, true);
             }, 100);
         });
@@ -405,7 +444,8 @@ export class FXLFramePoolManager {
         this.pool.clear();
 
         // Revoke all blobs
-        this.blobs.forEach(v => URL.revokeObjectURL(v));
+        this.blobs.forEach(v => v.reset());
+        this.blobs.clear();
 
         // Clean up injector if it exists
         this.injector?.dispose();
@@ -496,13 +536,13 @@ export class FXLFramePoolManager {
                 if(!this.pool.has(href)) return;
                 this.cancelShowing(href);
                 await this.pool.get(href)?.unload();
-                // this.pool.delete(href);
+                this.blobs.get(href)?.reset();
             });
 
             // Check if base URL of publication has changed
             if(this.currentBaseURL !== undefined && pub.baseURL !== this.currentBaseURL) {
                 // Revoke all blobs
-                this.blobs.forEach(v => URL.revokeObjectURL(v));
+                this.blobs.forEach(v => v.reset());
                 this.blobs.clear();
             }
             this.currentBaseURL = pub.baseURL;
@@ -512,16 +552,14 @@ export class FXLFramePoolManager {
                 const itm = pub.readingOrder.items[index];
                 if(!itm) return; // TODO throw?
                 if(!this.blobs.has(href)) {
-                    const blobBuilder = new FrameBlobBuider(
+                    this.blobs.set(href, new FrameBlobBuilder(
                         pub,
                         this.currentBaseURL || "",
                         itm,
                         {
                             injector: this.injector
                         }
-                    );
-                    const blobURL = await blobBuilder.build(true);
-                    this.blobs.set(href, blobURL);
+                    ));
                 }
 
                 // Show future offscreen frame in advance after a delay
@@ -535,7 +573,7 @@ export class FXLFramePoolManager {
                             const spread = this.makeSpread(this.reAlign(index));
                             const page = this.spreadPosition(spread, itm);
                             const fm = this.pool.get(href)!;
-                            await fm.load(modules, this.blobs.get(href)!);
+                            await fm.load(modules, await this.blobs.get(href)!.build(true));
                             if(!this.peripherals.isScaled) // When scaled, positioning is screwed up, so wait to show
                                 await fm.show(page); // Show/activate new frame
                             this.delayedShow.delete(href);
@@ -559,10 +597,10 @@ export class FXLFramePoolManager {
             for (const s of spread) {
                 const newFrame = this.pool.get(s.href)!;
                 const source = this.blobs.get(s.href);
-                if(!source) continue; // This can get destroyed
+                if(!source) continue; // Thfis can get destroyed
 
                 this.cancelShowing(s.href);
-                await newFrame.load(modules, source); // In order to ensure modules match the latest configuration
+                await newFrame.load(modules, await source.build(true)); // In order to ensure modules match the latest configuration
                 await newFrame.show(this.spreadPosition(spread, s)); // Show/activate new frame
                 this.previousFrames.push(newFrame);
                 await newFrame.activate();

package/src/epub/fxl/FXLPeripherals.ts

@@ -35,6 +35,8 @@ export interface Zoomer {
     };
 }
 
+export const isTypedOMSupported = () => typeof window.CSSTransformValue !== 'undefined';
+
 export class FXLPeripherals {
 
     private readonly manager: FXLFramePoolManager;
@@ -339,6 +341,12 @@ export class FXLPeripherals {
 
     private moveFrame = 0;
 
+    // Reused typed transform for the per-frame drag write: allocating fresh
+    // CSSTransformValue/CSSTranslate objects per write is slower than string
+    // parsing; mutating a persistent one is faster than both
+    private dragTranslate: CSSTranslate | null = null;
+    private dragTransform: CSSTransformValue | null = null;
+
     /**
      * touchmove event handler
      */
@@ -494,11 +502,24 @@ export class FXLPeripherals {
             const currentOffset = currentSlide * (this.manager.width / this.manager.perPage);
             const dragOffset = (this.pan.endX - this.pan.startX);
             const offset = this.manager.rtl ? currentOffset + dragOffset : currentOffset - dragOffset;
+            // Snap the translation to device pixels: at fractional offsets the
+            // spread gutter is rasterized with a hairline gap between the pages
+            const dpr = window.devicePixelRatio || 1;
+            const snapped = Math.round((this.manager.rtl ? 1 : -1) * offset * dpr) / dpr;
 
             cancelAnimationFrame(this.moveFrame);
             this.moveFrame = requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
-                    this.manager.spineElement.style.transform = `translate3d(${(this.manager.rtl ? 1 : -1) * offset}px, 0, 0)`;
+                    if(isTypedOMSupported()) {
+                        if(!this.dragTransform) {
+                            this.dragTranslate = new CSSTranslate(CSS.px(0), CSS.px(0), CSS.px(0));
+                            this.dragTransform = new CSSTransformValue([this.dragTranslate]);
+                        }
+                        (this.dragTranslate!.x as CSSUnitValue).value = snapped;
+                        this.manager.spineElement.attributeStyleMap.set("transform", this.dragTransform);
+                    } else {
+                        this.manager.spineElement.style.transform = `translate3d(${snapped}px, 0, 0)`;
+                    }
                 })
             });
         }

package/src/index.ts

@@ -2,6 +2,7 @@ export * from './Navigator.ts';
 export * from './decorations/index.ts';
 export * from './webpub/index.ts';
 export * from './epub/index.ts';
+export * from './divina/index.ts';
 export * from './audio/index.ts';
 export * from './helpers/index.ts';
 export * from './preferences/index.ts';

package/src/peripherals/KeyboardConditionBridge.ts

@@ -12,18 +12,28 @@ export class KeyboardConditionBridge {
     setup() {
         let initializing = true;
 
+        // Subscribe once per distinct condition object: combos commonly share
+        // one condition, and a per-combo subscription would trigger one full
+        // onUpdate rebuild per combo for a single condition change.
+        const combosByCondition = new Map<NonNullable<KeyCombo["condition"]>, KeyCombo[]>();
         this.config.forEach(peripheral =>
             peripheral.keyCombos.forEach(combo => {
                 if (combo.condition) {
-                    const unsub = combo.condition.subscribe((value) => {
-                        this.conditionValues.set(combo, value);
-                        if (!initializing) this.onUpdate(this.buildSerializable());
-                    });
-                    this.unsubs.push(unsub);
+                    const combos = combosByCondition.get(combo.condition) ?? [];
+                    combos.push(combo);
+                    combosByCondition.set(combo.condition, combos);
                 }
             })
         );
 
+        combosByCondition.forEach((combos, condition) => {
+            const unsub = condition.subscribe((value) => {
+                combos.forEach(combo => this.conditionValues.set(combo, value));
+                if (!initializing) this.onUpdate(this.buildSerializable());
+            });
+            this.unsubs.push(unsub);
+        });
+
         initializing = false;
         this.onUpdate(this.buildSerializable());
     }

package/src/peripherals/KeyboardPeripherals.ts

@@ -14,11 +14,16 @@ export interface KeyboardPeripheralOptions {
 export class KeyboardPeripherals {
     private keydownHandler?: (event: KeyboardEvent) => void;
     private keyManager = new KeyCombinationManager();
+    // pagehide instead of unload: an unload listener disqualifies the page
+    // from the back/forward cache; only tear down on real unloads.
+    private readonly pagehideHandler = (e: PageTransitionEvent) => {
+        if (!e.persisted) this.destroy();
+    };
 
     constructor(options: KeyboardPeripheralOptions = {}) {
         this.setupKeyboardPeripherals(options.keyboardPeripherals || []);
     }
-    
+
     private setupKeyboardPeripherals(keyboardPeripherals: KeyboardPeripheral[]) {
         if (keyboardPeripherals.length > 0) {
             // Create activity event dispatcher
@@ -28,26 +33,27 @@ export class KeyboardPeripherals {
                 });
                 window.dispatchEvent(customEvent);
             };
-            
+
             // Create unified handler using the provided keyboard peripherals
             this.keydownHandler = this.keyManager.createUnifiedHandler(
                 "", // Empty string as target frame source for main window
-                keyboardPeripherals, 
+                keyboardPeripherals,
                 dispatcher
             );
-            
+
             if (this.keydownHandler) {
                 document.addEventListener("keydown", this.keydownHandler, true);
             }
         }
-        
-        window.addEventListener("unload", () => this.destroy());
+
+        window.addEventListener("pagehide", this.pagehideHandler);
     }
-    
+
     public destroy() {
         if (this.keydownHandler) {
             document.removeEventListener("keydown", this.keydownHandler, true);
             this.keydownHandler = undefined;
         }
+        window.removeEventListener("pagehide", this.pagehideHandler);
     }
 }

package/src/webpub/WebPubFrameManager.ts

@@ -25,7 +25,7 @@ export class WebPubFrameManager {
         this.frame = document.createElement("iframe");
         this.frame.classList.add("readium-navigator-iframe");
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.opacity = "0";
         this.frame.style.position = "absolute";
         this.frame.style.pointerEvents = "none";
@@ -109,7 +109,7 @@ export class WebPubFrameManager {
     async hide(): Promise<void> {
         if(this.destroyed) return;
         this.frame.style.visibility = "hidden";
-        this.frame.style.setProperty("aria-hidden", "true");
+        this.frame.ariaHidden = "true";
         this.frame.style.opacity = "0";
         this.frame.style.pointerEvents = "none";
         this.hidden = true;
@@ -140,7 +140,7 @@ export class WebPubFrameManager {
                     this.applyContentProtection();
                     const remove = () => {
                         this.frame.style.removeProperty("visibility");
-                        this.frame.style.removeProperty("aria-hidden");
+                        this.frame.ariaHidden = null;
                         this.frame.style.removeProperty("opacity");
                         this.frame.style.removeProperty("pointer-events");
                         this.hidden = false;