@jsenv/dom 0.17.15 → 0.17.17

package/dist/jsenv_dom.js

@@ -12791,15 +12791,77 @@ import.meta.css = [/* css */`
 
      !important because this is not a preference: a box that travels cannot let
      the page travel with it, and the rule has to win over whatever an
-     application says about its own scrollers. */
-  [data-drag-travel*="x"],
-  [data-drag-travel*="x"] * {
+     application says about its own scrollers.
+
+     Said on the box, where it is a statement about the box and not about what
+     it happens to hold — and read only where a browser asks the box at all:
+     one that CLIPS is asked (it is a scroll container, which is what "asked"
+     means to a browser), one that does not is walked past. A box that travels
+     usually clips, because moving something in and out of a box is what
+     clipping is for. One that does not still travels — what an inner scroller
+     has left over reaches the page there, and the rule below says why that is
+     the lesser of the two prices. An application that knows which of ITS
+     elements scroll can contain those itself, on the element every engine
+     reads; nothing in here can know that from a stylesheet. */
+  [data-drag-travel*="x"] {
     overscroll-behavior-x: contain !important;
   }
-  [data-drag-travel*="y"],
-  [data-drag-travel*="y"] * {
+  [data-drag-travel*="y"] {
     overscroll-behavior-y: contain !important;
   }
+  /* The scrollers a browser makes on its own, wherever they are inside the box:
+     a textarea and a list of options scroll their own content by nature, and
+     nobody had to say so for them — no stylesheet declared them, so nothing
+     else here can find them, and they would hand what is left of a gesture to
+     the page like any undeclared scroller does.
+
+     Named rather than found, because being native is exactly what makes them
+     nameable. An input is NOT in the list: it is the one form control that has
+     nothing to scroll on the axis anything travels on, and containing it is how
+     a row-wide invisible checkbox becomes a hole under the wheel.
+
+     A textarea with nothing in it, or a list of options short enough to fit, is
+     contained too — a browser cannot be asked "only if it scrolls". On Blink
+     that costs a wheel over an empty textarea, which then moves nothing rather
+     than the list around it; elsewhere the engine already only asks what
+     scrolls. Worth the page not moving behind a travel. */
+  [data-drag-travel*="x"] :is(textarea, select[multiple], select[size]) {
+    overscroll-behavior-x: contain !important;
+  }
+  [data-drag-travel*="y"] :is(textarea, select[multiple], select[size]) {
+    overscroll-behavior-y: contain !important;
+  }
+  /* The same thing said again to everything inside — and only where saying it
+     is what works.
+
+     Two readings of "contain" are out there, and the rule above lands in only
+     one of them. Blink walks EVERY scroll container between the pointer and the
+     page and asks each one whether the gesture may go past it, whether or not
+     it had anything to scroll: the box above is asked, and containing it is the
+     whole answer. Gecko and WebKit ask only the ones that actually scroll: the
+     box is skipped (it travels, it does not scroll), and what is left of a
+     list's gesture reaches the page unless the LIST itself was told — which is
+     what this does, to everything, because which descendant scrolls is not
+     something a stylesheet can know.
+
+     Not said to Blink, where it is not needed and does harm: an element that
+     clips is a scroll container to a browser (a line of text with an ellipsis,
+     a rounded card, an invisible checkbox covering a row), and Blink asking one
+     of those with nothing to scroll gets "no further" for an answer — the wheel
+     stops there and the list right above it never moves. A dead zone under the
+     pointer, wherever something inside the box happens to clip.
+
+     Blink is told apart by a property only it has, rather than by reading a user
+     agent: the split above is between engines, and -webkit-app-region is one of
+     the few things that names one. */
+  @supports not (-webkit-app-region: none) {
+    [data-drag-travel*="x"] * {
+      overscroll-behavior-x: contain !important;
+    }
+    [data-drag-travel*="y"] * {
+      overscroll-behavior-y: contain !important;
+    }
+  }
 `, "@jsenv/dom/src/interaction/drag/drag_to_travel.js"];
 
 // How far a pointer goes before it is a travel rather than a click: below this
@@ -12832,6 +12894,16 @@ const DRAG_EXCLUDED_SELECTOR = ["input", "textarea", "select", '[contenteditable
 const DRAG_AXES_ATTRIBUTE = "data-travel-by-drag";
 const WHEEL_AXES_ATTRIBUTE = "data-travel-by-wheel";
 
+// A surface the browser paints in the top layer: it is still a DOM descendant
+// of whatever it was written in, and it is nowhere near it on screen — it
+// covers everything. So a gesture that happened on it is not the gesture of any
+// box it merely sits on top of, and every walk up the tree from the pointer
+// ends here: the boxes above are behind, and behind is not under the finger.
+const TOP_LAYER_SELECTOR = [":popover-open", "dialog:modal", ":fullscreen"].join(",");
+const isTopLayer = element => {
+  return element.matches(TOP_LAYER_SELECTOR);
+};
+
 /**
  * What is left for this box of the axes it travels, once the boxes it CONTAINS
  * have taken theirs: a row of slides inside a page that walks between pages, a
@@ -12846,6 +12918,10 @@ const WHEEL_AXES_ATTRIBUTE = "data-travel-by-wheel";
  * the browser for the pointer LAST, which is the outermost box — the wrong one,
  * and past that point the inner one stops being told anything. So the box that
  * does not own the gesture must never ask for it.
+ *
+ * A box lifted into the top layer on the way up takes everything: a popover or a
+ * modal dialog is written inside a slide and painted over the whole screen, so
+ * the slides are nowhere near the finger and none of the axes are left.
  */
 const axesLeftBy = (axes, fromElement, stopElement, attribute) => {
   if (!stopElement.contains(fromElement)) {
@@ -12857,6 +12933,11 @@ const axesLeftBy = (axes, fromElement, stopElement, attribute) => {
   let left = axes;
   let element = fromElement;
   while (element && element !== stopElement && element.nodeType === 1) {
+    if (isTopLayer(element)) {
+      // The gesture happened on a surface painted over this box, not in it:
+      // there is nothing left of it here, whatever axes are still unclaimed.
+      return "";
+    }
     const taken = element.getAttribute(attribute);
     if (taken) {
       let rest = "";
@@ -12884,6 +12965,11 @@ const axesLeftBy = (axes, fromElement, stopElement, attribute) => {
 const scrollRoomTowards = (fromElement, stopElement, axis, sign) => {
   let element = fromElement;
   while (element && element !== stopElement && element.nodeType === 1) {
+    if (isTopLayer(element)) {
+      // A scroller above a top-layer surface is painted behind it: whatever
+      // room it has left is not room the finger is asking for.
+      return false;
+    }
     const size = axis === "x" ? element.clientWidth : element.clientHeight;
     const scrollSize = axis === "x" ? element.scrollWidth : element.scrollHeight;
     if (scrollSize > size + 1) {

package/package.json

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