From 9cfe266929ba650438d908253671a75a42dc4ccf Mon Sep 17 00:00:00 2001
From: John O'Keefe <git@linuxhg.com>
Date: Mon, 14 Sep 2026 19:45:50 -0400
Subject: [PATCH] Ignore small height-only viewport resizes

Mobile browser toolbar transitions change the viewport height by a
fraction mid-gesture; re-rendering for them re-wraps the whole book
and reads as a page refresh. Re-render only for width changes or
height changes of 25% or more.
---
 paginator.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/paginator.js b/paginator.js
index 07fe8db..3127294 100644
--- a/paginator.js
+++ b/paginator.js
@@ -427,7 +427,23 @@ export class Paginator extends HTMLElement {
         'max-inline-size', 'max-block-size', 'max-column-count',
     ]
     #root = this.attachShadow({ mode: 'closed' })
-    #observer = new ResizeObserver(() => this.render())
+    #lastContainerSize
+    #observer = new ResizeObserver(entries => {
+        // Mobile browsers grow/shrink the viewport by ~7–17% when the
+        // toolbar hides/shows mid-gesture; re-wrapping the whole book
+        // for that reads as a page refresh. Only re-render for real
+        // layout changes: any width change, or a height change large
+        // enough to be a rotation, keyboard, or split-screen.
+        const rect = entries?.[entries.length - 1]?.contentRect
+        if (rect && rect.width && rect.height && this.#lastContainerSize) {
+            const [w, h] = this.#lastContainerSize
+            if (Math.abs(rect.width - w) < 1
+                && Math.abs(rect.height - h) / h < 0.25) return
+        }
+        if (rect && rect.width && rect.height)
+            this.#lastContainerSize = [rect.width, rect.height]
+        this.render()
+    })
     #top
     #background
     #container