@jsenv/navi 0.29.404 → 0.29.406

package/dist/jsenv_navi_side_effects.js

@@ -322,6 +322,8 @@ const SAFE_AREA_CSS = /* css */ `@property --navi-app-inset-top {
     --navi-fixed-bar-space-bottom: 0px;
     --navi-fixed-bar-space-left: 0px;
     --navi-keyboard-inset-bottom: env(keyboard-inset-height, 0px);
+    --navi-keyboard-strip-allowance: min(var(--navi-keyboard-inset-bottom),
+        64px);
     --navi-app-inset-top: max(0px,
         (var(--navi-vvh) - var(--navi-app-max-height, var(--navi-vvh))) / 2);
     --navi-app-inset-bottom: calc(var(--navi-app-inset-top) + var(--navi-keyboard-inset-bottom));
@@ -338,23 +340,26 @@ const SAFE_AREA_CSS = /* css */ `@property --navi-app-inset-top {
           max(env(safe-area-inset-left), var(--navi-fixed-bar-space-left)));
     scroll-padding-top: var(--navi-safe-area-inset-top);
     scroll-padding-right: var(--navi-safe-area-inset-right);
-    scroll-padding-bottom: var(--navi-safe-area-inset-bottom);
+    scroll-padding-bottom: calc(var(--navi-safe-area-inset-bottom) +
+          var(--navi-keyboard-strip-allowance));
     scroll-padding-left: var(--navi-safe-area-inset-left);
   }
 
   [data-navi-safe-area] {
     padding-top: var(--navi-safe-area-inset-top);
     padding-right: var(--navi-safe-area-inset-right);
-    padding-bottom: var(--navi-safe-area-inset-bottom);
+    padding-bottom: calc(var(--navi-safe-area-inset-bottom) +
+          var(--navi-keyboard-strip-allowance));
     padding-left: var(--navi-safe-area-inset-left);
     scroll-padding-top: var(--navi-safe-area-inset-top);
     scroll-padding-right: var(--navi-safe-area-inset-right);
-    scroll-padding-bottom: var(--navi-safe-area-inset-bottom);
+    scroll-padding-bottom: calc(var(--navi-safe-area-inset-bottom) +
+          var(--navi-keyboard-strip-allowance));
     scroll-padding-left: var(--navi-safe-area-inset-left);
   }
 
   :root:not(:has([data-navi-safe-area])):after {
-    height: var(--navi-keyboard-inset-bottom);
+    height: calc(var(--navi-keyboard-inset-bottom) + var(--navi-keyboard-strip-allowance));
     content: "";
     display: block;
   }
@@ -3072,10 +3077,15 @@ const afterFirstFrame = (element) => {
  * bringing the focused field out from under the keyboard. A viewport that
  * shrinks makes the browser scroll to the field; a keyboard that merely paints
  * over the page leaves whatever is under it under it. So navi does that
- * scroll here, and it needs two things safe_area.js provides: a
- * scroll-padding-bottom that counts the keyboard in, so the scroll stops right
- * above it, and room at the end of the scroller, so a field near the end of
- * the page has somewhere to go.
+ * scroll here, with two things safe_area.js provides: a scroll-padding-bottom
+ * that counts the keyboard in, plus an allowance for the strip Chrome paints
+ * above it without reporting it (--navi-keyboard-strip-allowance), which
+ * bounds the band the field is brought into; and room at the end of the
+ * scroller, so a field near the end of the page has somewhere to go.
+ *
+ * Only the arrival is navi's: once the field is in view, Chrome keeps the caret
+ * there itself as typing grows a textarea, against that same
+ * scroll-padding-bottom.
  */
 
 
@@ -3095,11 +3105,15 @@ const revealFocusedField = () => {
   if (!isEditableTarget(field)) {
     return;
   }
-  // "nearest" against a scroll-padding-bottom that counts the keyboard in
-  // (:root and [data-navi-safe-area], see safe_area.js): a field already clear
-  // of it does not move, one under it stops right above it.
+  if (isInDocumentBand(field)) {
+    return;
+  }
+  // "center" rather than "nearest": nearest stops the field on the band's
+  // edge, clear of the strip only by the allowance. The middle of the band
+  // clears a strip taller than guessed too — and centering what is not fully
+  // visible is what Chrome does itself when the viewport shrinks.
   scrollIntoViewThroughScrollables(field, {
-    block: "nearest",
+    block: "center",
     behavior: "instant",
   });
 };
@@ -3109,6 +3123,21 @@ subscribeVirtualKeyboardGeometryChange(revealFocusedField);
 // keyboard it does not move, and no geometrychange fires.
 document.addEventListener("focusin", revealFocusedField, { capture: true });
 
+// The band the document leaves visible: inside its scroll-padding (the bars,
+// the keyboard and its strip, see safe_area.js). Against the window rather
+// than each scroller's own band: the keyboard covers the window, and a field
+// hidden inside its own scroller is what the browser's focus already scrolls
+// to.
+const isInDocumentBand = (field) => {
+  const documentElement = document.documentElement;
+  const style = getComputedStyle(documentElement);
+  const bandTop = parseFloat(style.scrollPaddingTop) || 0;
+  const bandBottom =
+    documentElement.clientHeight - (parseFloat(style.scrollPaddingBottom) || 0);
+  const { top, bottom } = field.getBoundingClientRect();
+  return top >= bandTop && bottom <= bandBottom;
+};
+
 installImportMetaCssBuild(import.meta);
 
 const button = document.createElement("button");