@jsenv/dom 0.17.78 → 0.17.80

package/dist/jsenv_dom.js

@@ -16673,9 +16673,10 @@ const stickyAsRelativeCoords = (
  * to do with the field being typed into — the page reflows, fixed bars move,
  * and a mobile browser fires that resize transiently as focus goes from one
  * input to the next. Overlaying leaves the layout alone and hands over a
- * number instead. So navi takes it by default (see its own index.js) and only
- * offers a way back out, for an app whose own layout was built around the
- * viewport shrinking.
+ * number instead. navi offers it (enableVirtualKeyboardOverlay) rather than
+ * taking it by default: the deal also takes away what the browser does for a
+ * shrinking viewport, and that has to be redone by hand (see navi's
+ * layout/virtual_keyboard.js).
  */
 
 const virtualKeyboard = window.navigator.virtualKeyboard;
@@ -16718,21 +16719,37 @@ const getVirtualKeyboardOverlayHeight = () => {
 };
 
 /**
- * Calls `callback` whenever the keyboard shows, hides or resizes. Returns an
- * unsubscribe function; a no-op (never calls back) without support.
+ * Calls `callback` whenever the keyboard shows, hides or resizes — whenever
+ * getVirtualKeyboardOverlayHeight() changes. Returns an unsubscribe function;
+ * a no-op (never calls back) without support.
+ *
+ * On the height alone: Chrome (Android 10 / Chrome 153) also fires
+ * "geometrychange" at an unchanged height while the page is scrolled with the
+ * keyboard up, and a listener acting on those — bringing the focused field
+ * back into view — takes the scroll away from the user. The rest of the rect
+ * says nothing either (see getVirtualKeyboardOverlayHeight for its y).
  *
  * Undebounced on purpose, unlike window/visualViewport resize
- * (window_size.js): "geometrychange" is not the transient storm those are —
- * it fires on the keyboard itself changing, not on the layout reacting to it,
- * which is the whole point of overlaying.
+ * (window_size.js): filtered on the height, what is left is the keyboard
+ * itself changing, not the layout reacting to it, which is the whole point of
+ * overlaying.
  */
 const subscribeVirtualKeyboardGeometryChange = (callback) => {
   if (!virtualKeyboard) {
     return () => {};
   }
-  virtualKeyboard.addEventListener("geometrychange", callback);
+  let height = getVirtualKeyboardOverlayHeight();
+  const onGeometryChange = (event) => {
+    const newHeight = getVirtualKeyboardOverlayHeight();
+    if (newHeight === height) {
+      return;
+    }
+    height = newHeight;
+    callback(event);
+  };
+  virtualKeyboard.addEventListener("geometrychange", onGeometryChange);
   return () => {
-    virtualKeyboard.removeEventListener("geometrychange", callback);
+    virtualKeyboard.removeEventListener("geometrychange", onGeometryChange);
   };
 };
 
@@ -16840,7 +16857,7 @@ window.addEventListener("resize", (event) => {
  * and only on browsers with no visualViewport at all.
  *
  * The keyboard is then subtracted rather than assumed to have already shrunk
- * the viewport: with `overlaysContent` (virtual_keyboard.js, navi turns it on)
+ * the viewport: with `overlaysContent` (virtual_keyboard.js, an app turns it on)
  * the viewport stays full height and the keyboard is painted over its bottom.
  * Zero everywhere else, the browser having done the subtraction itself.
  */
@@ -17479,13 +17496,26 @@ const visibleRectEffect = (
       }
     }
     {
+      // One check per frame, in the frame's animation callbacks: a touchmove
+      // arrives after the pointermove handlers wrote to the DOM, so checking
+      // synchronously forces a layout inside every move of every drag on the
+      // page (a wheel spun in an open sheet), for a position the frame's own
+      // layout gives for free a moment later, before anything is painted.
+      let touchMoveRafId = null;
       const onWindowTouchMove = (e) => {
-        autoCheck(e);
+        if (touchMoveRafId !== null) {
+          return;
+        }
+        touchMoveRafId = requestAnimationFrame(() => {
+          touchMoveRafId = null;
+          autoCheck(e);
+        });
       };
       window.addEventListener("touchmove", onWindowTouchMove, {
         passive: true,
       });
       addTeardown(() => {
+        cancelAnimationFrame(touchMoveRafId);
         window.removeEventListener("touchmove", onWindowTouchMove, {
           passive: true,
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.17.78",
+  "version": "0.17.80",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {