react-x11 2.18.2 → 2.18.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.18.2",
+  "version": "2.18.3",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [

package/src/cocoa/overlay.js

@@ -11,9 +11,10 @@
 // so where two surfaces overlap, both overlays are above both frames.
 //
 // It speaks the verbs of a window the overlay drives on X11 — `setState`,
-// `map`, `unmap`, `getContext`, `destroy` — plus `present`, which puts what
-// was painted on the layer: ntk blits an X window's backing store on its
-// own, where a layer's contents are a copy the bitmap has to be pushed to.
+// `map`, `unmap`, `getContext`, `scrollRegion`, `destroy` — plus `present`,
+// which puts what was painted on the layer: ntk blits an X window's backing
+// store on its own, where a layer's contents are a copy the bitmap has to be
+// pushed to.
 import { BackendContext2D } from '../backend/context2d.js';
 import { withoutActions } from './quiet.js';
 
@@ -135,6 +136,42 @@ export class CocoaOverlayPane {
     return this._ctx;
   }
 
+  /**
+   * Move the pixels of `rect` (pane coordinates, device px) by (dx, dy)
+   * inside the bitmap — ntk `Window.scrollRegion`'s contract, which the
+   * overlay speaks to either backend: the band that survives the shift
+   * inside `rect` moves, the rest of it is left as it was, and false means
+   * nothing moved, so the caller repaints instead. A child that only moved
+   * is one of these rather than a repaint (src/gloverlay.js, issue #644).
+   *
+   * The bitmap is the pane's own and the layer holds a copy of it, so the
+   * move lands on screen with the frame's `present`, after the strips it
+   * uncovered are painted — never halfway.
+   */
+  scrollRegion(rect, dx, dy) {
+    if (this.destroyed || !this._surface) return false;
+    if (!Number.isInteger(dx) || !Number.isInteger(dy)) return false;
+    // a bitmap of another size is one the next paint replaces, whole
+    const size = this._surfaceSize;
+    if (
+      size.width !== Math.max(1, this.rect.width) ||
+      size.height !== Math.max(1, this.rect.height)
+    ) {
+      return false;
+    }
+    const moved = this._native.scrollSurface(
+      this._surface,
+      Math.round(rect.x),
+      Math.round(rect.y),
+      Math.round(rect.width),
+      Math.round(rect.height),
+      dx,
+      dy,
+    );
+    if (moved) this._dirty = true;
+    return Boolean(moved);
+  }
+
   /** What was painted, onto the layer — a copy, so the bitmap is free to be
    * painted again at once. */
   present() {

package/src/glnodes.js

@@ -11,6 +11,7 @@ import { cssColorStraight } from 'ntk';
 export { directGLFailure, hasDirectGL } from './glbackend.js';
 
 import { GlOverlay, canOverlay } from './gloverlay.js';
+import { layoutDiff } from './nodes/damage.js';
 import { Node } from './nodes/node.js';
 import { FramePacer, resolveFrameRate } from './pacing.js';
 
@@ -320,11 +321,102 @@ export class GlAreaNode extends Node {
     };
   }
 
+  /**
+   * `Node.absolutize`, with the children walked one at a time where a pane
+   * holds them — the frame's layout diff running (a bounded frame), no
+   * scroll shift riding over this node, no layout algorithm of its own
+   * placing them, and this node's own rect where it was, so the panes are
+   * too. A child that moved and changed nothing else is then reported to
+   * the overlay instead of claimed (`_absolutizeChild`); anywhere else the
+   * walk is the plain one.
+   */
   absolutize(originX, originY) {
-    super.absolutize(originX, originY);
+    const overlay = this._overlay;
+    if (
+      !overlay?.panes.length ||
+      !layoutDiff.sink ||
+      layoutDiff.shift ||
+      this._host !== null ||
+      !this.yoga
+    ) {
+      super.absolutize(originX, originY);
+      this._syncGeometry();
+      return;
+    }
+    this._placed = true;
+    const was = this.abs;
+    this._assignAbs(
+      originX + this.yoga.getComputedLeft(),
+      originY + this.yoga.getComputedTop(),
+      this.yoga.getComputedWidth(),
+      this.yoga.getComputedHeight(),
+    );
+    if (this.props.onLayout) this._reportLayout();
+    // `_assignAbs` keeps the object when nothing changed
+    const still = this.abs === was;
+    const { x, y } = this.abs;
+    for (const child of this.children) {
+      if (child.isWindow) continue;
+      if (still) this._absolutizeChild(child, x, y, overlay);
+      else child.absolutize(x, y);
+    }
     this._syncGeometry();
   }
 
+  /**
+   * One child, laid out from (originX, originY). When all that changed is
+   * where it sits — the same size, somewhere else, a plain box drawn where
+   * layout put it — it is walked with the layout diff's `shift` set to the
+   * move (issue #644): every descendant that lands where it was plus the
+   * move claims nothing, exactly as under a scroll blit (issue #398), and
+   * one that lands anywhere else claims both ends. The child itself is one
+   * of the first kind, so the move claims nothing at all here; the overlay
+   * is told of it instead, with the reach its pixels had, and settles it
+   * after the panes are placed (`GlOverlay.settleMoves`) — moved on the
+   * pane, or claimed where it was and where it is.
+   *
+   * `layoutDiff.ride` marks the walk as this kind, for the one node that
+   * drops the diff under a shift: a scroll pane laid out again claims its
+   * own box there, since the move claimed nothing for it
+   * (nodes/scrollable.js).
+   */
+  _absolutizeChild(child, originX, originY, overlay) {
+    const y = child.yoga;
+    const old = child.abs;
+    if (
+      !y ||
+      child.hidden ||
+      child.style?.display === 'none' ||
+      child.isScroller?.() ||
+      !(old.width > 0 && old.height > 0) ||
+      this.root?._placedNodes?.has(child)
+    ) {
+      child.absolutize(originX, originY);
+      return;
+    }
+    const dx = originX + y.getComputedLeft() - old.x;
+    const dy = originY + y.getComputedTop() - old.y;
+    if (
+      (dx === 0 && dy === 0) ||
+      y.getComputedWidth() !== old.width ||
+      y.getComputedHeight() !== old.height
+    ) {
+      child.absolutize(originX, originY);
+      return;
+    }
+    // before it moves: every pixel of it a pane holds
+    const reach = child.paintBounds();
+    layoutDiff.shift = { x: dx, y: dy };
+    layoutDiff.ride = true;
+    try {
+      child.absolutize(originX, originY);
+    } finally {
+      layoutDiff.shift = null;
+      layoutDiff.ride = false;
+    }
+    overlay.noteMove(child, reach, dx, dy);
+  }
+
   // the scroll fast path moves `abs` without coming through absolutize
   // (issue #405), and the real X window has to follow it all the same
   _shiftAbs(dx, dy) {
@@ -537,8 +629,10 @@ export class GlAreaNode extends Node {
 
   /**
    * The owning window's frame, after layout (`WindowNode._syncOverlays`):
-   * panes for where the children are now. True when a pane was made,
-   * resized or dropped — a paint the frame then owes.
+   * panes for where the children are now, and the moves the layout pass
+   * reported settled against them — moved on a pane, or claimed. True when
+   * a pane was made, resized or dropped, or a move claimed something — a
+   * paint the frame then owes.
    */
   _syncOverlay() {
     if (!this._overlay) {
@@ -548,7 +642,8 @@ export class GlAreaNode extends Node {
       }
       this._overlay = new GlOverlay(this);
     }
-    const changed = this._overlay.sync();
+    let changed = this._overlay.sync();
+    if (this._overlay.settleMoves(this.root)) changed = true;
     if (this._overlay.panes.length) this._joinSurfaces();
     if (this.children.length === 0 && this._overlay.panes.length === 0) {
       this._overlay = null;

package/src/gloverlay.js

@@ -40,13 +40,41 @@
 // by the same propagation that brings it the pointer over the surface
 // (src/glnodes.js, `_create`), and lands on the child it is over.
 //
+// A pane keeps what it holds between frames, so a child that only moved is
+// already painted, one shift away (issue #644). The layout pass reports such
+// a child instead of claiming it (`GlAreaNode._absolutizeChild`), and the
+// frame moves its pixels inside the pane — `scrollRegion`, the verb the
+// scroll blit uses on a window — and repaints only what the move uncovered
+// and what it now overlaps differently (`settleMoves`). A pan over a
+// graph's mounted node bodies is that frame, sixty times a second.
+//
 // A leaf module, like src/embedding.js: `appcontext.js` asks `canOverlay`
-// for `useSupports('glOverlay')`, and it imports nothing of ours.
+// for `useSupports('glOverlay')`, and it imports nothing of ours but the
+// damage model's arithmetic, which imports nothing at all.
 import { cssColorStraight } from 'ntk';
 
+import { FULL_DAMAGE, addDamageRect } from './nodes/damage.js';
+import {
+  innerPixels,
+  intersectRects,
+  rectArea,
+  rectContains,
+  unionRect,
+} from './nodes/rects.js';
+
 // ConfigureWindow's stack mode: directly above the sibling it names
 const STACK_ABOVE = 0;
 
+// Past this share of the pixels a move carries, the frame would repaint
+// most of them anyway — around what it claims itself, or around the other
+// children the copy reached — and the copy only adds to the bill.
+const MOVE_BLIT_MAX_REPAINT = 0.75;
+
+// The scroll blit's escape hatch (src/nodes/scrollblit.js), read the same
+// way: every path that moves retained pixels instead of repainting them is
+// one variable away from the plain repaint (docs/debugging.md).
+const NO_BLIT = process.env.REACT_X11_NO_SCROLL_BLIT === '1';
+
 /**
  * Whether the children of a `<glarea>` can be drawn over its surface on this
  * connection: a backend that composites a pane itself, or one that can make
@@ -73,16 +101,6 @@ function whole(r) {
   };
 }
 
-function intersect(a, b) {
-  const x = Math.max(a.x, b.x);
-  const y = Math.max(a.y, b.y);
-  const right = Math.min(a.x + a.width, b.x + b.width);
-  const bottom = Math.min(a.y + a.height, b.y + b.height);
-  return right > x && bottom > y
-    ? { x, y, width: right - x, height: bottom - y }
-    : null;
-}
-
 const overlaps = (a, b) =>
   a.x < b.x + b.width &&
   b.x < a.x + a.width &&
@@ -103,6 +121,48 @@ function around(a, b) {
 const sameRect = (a, b) =>
   a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 
+const shifted = (r, dx, dy) => ({
+  x: r.x + dx,
+  y: r.y + dy,
+  width: r.width,
+  height: r.height,
+});
+
+/** `a` with `b` taken out of it: up to four rects — the full-width bands
+ * above and below `b`, and the pieces either side of it between them. */
+function subtractRect(a, b) {
+  const cut = intersectRects(a, b);
+  if (!cut) return [a];
+  const out = [];
+  const right = a.x + a.width;
+  const bottom = a.y + a.height;
+  const cutRight = cut.x + cut.width;
+  const cutBottom = cut.y + cut.height;
+  if (cut.y > a.y) {
+    out.push({ x: a.x, y: a.y, width: a.width, height: cut.y - a.y });
+  }
+  if (cutBottom < bottom) {
+    out.push({
+      x: a.x,
+      y: cutBottom,
+      width: a.width,
+      height: bottom - cutBottom,
+    });
+  }
+  if (cut.x > a.x) {
+    out.push({ x: a.x, y: cut.y, width: cut.x - a.x, height: cut.height });
+  }
+  if (cutRight < right) {
+    out.push({
+      x: cutRight,
+      y: cut.y,
+      width: right - cutRight,
+      height: cut.height,
+    });
+  }
+  return out;
+}
+
 /** On screen: nothing from here to the window hidden or `display: 'none'`. */
 function shown(node) {
   for (let n = node; n; n = n.parent) {
@@ -125,7 +185,7 @@ function shown(node) {
 export function overlayRegions(area, surface) {
   const rects = [];
   for (const child of area.paintOrder()) {
-    const reach = intersect(whole(child._subtreeBounds()), surface);
+    const reach = intersectRects(whole(child._subtreeBounds()), surface);
     if (reach) rects.push(reach);
   }
   for (let merged = true; merged;) {
@@ -172,6 +232,13 @@ class Pane {
     this.transparent = transparent;
     this.full = true;
     this.ctx = null;
+    // placed this frame: what the pane holds is where the children were in
+    // the pane's own corner, not in the window, so nothing in it is a known
+    // shift away from where it goes
+    this.placed = false;
+    // moved pixels this frame, which has to reach the screen even when no
+    // pass follows it (`GlOverlay.paint`)
+    this.blitted = false;
   }
 
   context() {
@@ -188,7 +255,12 @@ class Pane {
     if (rect.width !== this.rect.width || rect.height !== this.rect.height) {
       this.full = true;
     }
+    // pixels a scroll blit moved this frame (nodes/scrollblit.js, which runs
+    // before `sync`) were moved in the pane's own corner, and the pane has
+    // since gone somewhere else
+    if (this.blitted) this.full = true;
     this.rect = rect;
+    this.placed = true;
     if (typeof this.wnd.setState === 'function') this.wnd.setState(rect);
     else {
       this.wnd.move?.(rect.x, rect.y);
@@ -196,6 +268,37 @@ class Pane {
     }
   }
 
+  /** Can the pixels of `rect`, in window coordinates, move inside this
+   * pane? Not when it is owed a paint whole or was placed this frame, and
+   * not where the backend has no verb for it. */
+  canBlit(rect) {
+    return (
+      !this.full &&
+      !this.placed &&
+      typeof this.wnd.scrollRegion === 'function' &&
+      rectContains(this.rect, rect)
+    );
+  }
+
+  /**
+   * Move the pixels of `rect` — window coordinates — by (dx, dy) inside the
+   * pane, with the window verb's contract (ntk `Window.scrollRegion`, and
+   * the Cocoa pane's own): the band that survives inside `rect` moves, the
+   * rest of it is left as it was. False when the backend could not, which
+   * leaves the pane exactly as it was.
+   */
+  blit(rect, dx, dy) {
+    const local = {
+      x: rect.x - this.rect.x,
+      y: rect.y - this.rect.y,
+      width: rect.width,
+      height: rect.height,
+    };
+    if (!this.wnd.scrollRegion(local, dx, dy)) return false;
+    this.blitted = true;
+    return true;
+  }
+
   show(on) {
     if (on) this.wnd.map?.();
     else this.wnd.unmap?.();
@@ -215,6 +318,10 @@ export class GlOverlay {
     // one pane over the whole surface, where the backend composites it
     this.composited = typeof this.app?.createOverlayPane === 'function';
     this.panes = [];
+    // the children this frame's layout moved and nothing else, reported
+    // rather than claimed (`GlAreaNode._absolutizeChild`) and settled after
+    // the panes are (`settleMoves`)
+    this.moves = [];
   }
 
   /**
@@ -229,6 +336,7 @@ export class GlOverlay {
   sync() {
     const area = this.area;
     const abs = area.abs;
+    for (const pane of this.panes) pane.placed = false;
     let rects = [];
     if (shown(area) && abs.width > 0 && abs.height > 0) {
       // the surface's own rect, rounded the way its window's is
@@ -279,7 +387,7 @@ export class GlOverlay {
     pane.full = true;
     const root = this.area.root;
     if (root && !root.destroyed)
-      root.invalidate(false, { ...pane.rect }, 'expose');
+      root.invalidate(false, { ...pane.rect }, 'expose', this.area);
   }
 
   /**
@@ -305,6 +413,145 @@ export class GlOverlay {
     }
   }
 
+  /**
+   * A child the layout pass moved and nothing else — every descendant
+   * landed where it was plus (dx, dy) or claimed where it did not — and
+   * claimed nothing for (`GlAreaNode._absolutizeChild`). `reach` is its
+   * `paintBounds()` from before the move: every pixel of it the panes hold.
+   */
+  noteMove(node, reach, dx, dy) {
+    this.moves.push({ node, reach, dx, dy });
+  }
+
+  /**
+   * The frame's moves, settled after `sync` has put the panes where the
+   * children are and before the frame takes its damage
+   * (`WindowNode._syncOverlays`). The one covering the most of the surface
+   * moves its pixels on its pane where that is safe and saves the repaint
+   * (`_blitMove`); every other one, and that one when not, is claimed where
+   * it was and where it is — the pixels the layout diff would have claimed
+   * for it and every descendant. True when there was anything to settle.
+   *
+   * The claims go to the panes' damage alone (`WindowNode._paneDamage`):
+   * the window paints none of a surface's children, and its pass under the
+   * surface is one nobody sees.
+   */
+  settleMoves(root) {
+    const moves = this.moves;
+    if (moves.length === 0) return false;
+    this.moves = [];
+    // the panes repaint whole this frame: nothing is owed
+    if (!root || root.destroyed || root._paneDamage === FULL_DAMAGE) {
+      return true;
+    }
+    const surface = this.area._geometry();
+    let best = null;
+    let most = 0;
+    for (const move of moves) {
+      const shown = intersectRects(whole(move.reach), surface);
+      const size = shown ? rectArea(shown) : 0;
+      if (size > most) {
+        best = move;
+        most = size;
+      }
+    }
+    // the others first: the pixels they claim are ones the copy may carry,
+    // and `_blitMove` repairs whatever the frame claims by then
+    for (const move of moves) if (move !== best) this._claimMove(root, move);
+    if (best && !this._blitMove(root, best)) this._claimMove(root, best);
+    return true;
+  }
+
+  /** Where a move's child was and where it is, claimed the ordinary way —
+   * cut to the surface's box, which clips the children (`clipsChildren`). */
+  _claimMove(root, { node, reach }) {
+    const box = this.area.abs;
+    for (const rect of [reach, node.paintBounds()]) {
+      const claim = intersectRects(rect, box);
+      if (claim) root._addPaneDamage(claim);
+    }
+  }
+
+  /**
+   * Move a child's pixels on its pane, and narrow what the frame owes the
+   * move to what the copy cannot supply. True when it did; false leaves
+   * the pane and the frame's damage as they were, for `_claimMove`.
+   *
+   * The copy is of what the child showed, moved as far as the child moved
+   * and kept where it is still on show (`dest`). That is right wherever
+   * the child's own drawing is the only thing that changed — and the frame
+   * repaints the rest:
+   *
+   * - what the child uncovered, and whatever of its new reach the copy did
+   *   not land on: its reach before and after, less `dest`;
+   * - the other children: the pixels of theirs the copy carried off with
+   *   the child's, and theirs that the copy covered — over the child or
+   *   under it, their own pixels are not a shift away;
+   * - what the panes are owed already, where the copy would carry it: a
+   *   claim is often a rect named before layout ran, and when it was
+   *   inside the child its content went with the copy. Repainted shifted
+   *   as well as where it stands, which is right whichever it was. A
+   *   claim that cannot reach the panes is not in their list
+   *   (`WindowNode._paneReach`) — a graph pane under the surface that
+   *   claims itself whole on every step of the pan this copy is.
+   *
+   * Past `MOVE_BLIT_MAX_REPAINT` of `dest` those repaint most of what the
+   * copy saves, and the plain claims have the frame.
+   */
+  _blitMove(root, { node, reach, dx, dy }) {
+    if (NO_BLIT || !Number.isInteger(dx) || !Number.isInteger(dy)) {
+      return false;
+    }
+    const area = this.area;
+    // a rounded surface clips its children to an arc, and the arc stays put
+    if ((area.style?.borderRadius ?? 0) > 0) return false;
+    // the whole pixels of the surface's box: a fractional edge is an
+    // antialiased clip, and that does not move either
+    const box = innerPixels(area.abs);
+    if (!box) return false;
+    const was = intersectRects(whole(reach), box);
+    const now = intersectRects(whole(node.paintBounds()), box);
+    // nothing of it was on show, so there is nothing to carry
+    if (!was) return false;
+    const pane = this.panes.find(
+      (p) => p.canBlit(was) && (!now || p.canBlit(now)),
+    );
+    if (!pane) return false;
+    const view = intersectRects(pane.rect, box);
+    const dest = intersectRects(shifted(was, dx, dy), view);
+    if (!dest) return false;
+    const cap = root._damageRectCap();
+    const claimed = root._paneDamage ?? [];
+    let rects = claimed;
+    const add = (rect) => {
+      if (rect) rects = addDamageRect(rects, rect, cap);
+    };
+    for (const claim of claimed)
+      add(intersectRects(shifted(claim, dx, dy), dest));
+    for (const piece of subtractRect(was, dest)) add(piece);
+    if (now) for (const piece of subtractRect(now, dest)) add(piece);
+    for (const other of area.paintOrder()) {
+      if (other === node) continue;
+      const theirs = whole(other.paintBounds());
+      add(intersectRects(theirs, dest));
+      add(intersectRects(shifted(theirs, dx, dy), dest));
+    }
+    // the list is disjoint, so the sum is the area it covers
+    let repainted = 0;
+    for (const rect of rects) {
+      const inside = intersectRects(rect, dest);
+      if (inside) repainted += rectArea(inside);
+    }
+    if (repainted > rectArea(dest) * MOVE_BLIT_MAX_REPAINT) return false;
+    // the verb moves the band that survives inside the rect it is handed,
+    // so handed where the pixels are and where they go, that band is `dest`
+    if (!pane.blit(unionRect(shifted(dest, -dx, -dy), dest), dx, dy)) {
+      return false;
+    }
+    root._paneDamage = rects;
+    return true;
+  }
+
   /**
    * Paint what the frame owes: every pane whole after it was made, resized
    * or lost its pixels, and otherwise the frame's damage cut to each pane —
@@ -323,10 +570,17 @@ export class GlOverlay {
       } else {
         passes = [];
         for (const rect of damage) {
-          const hit = intersect(rect, pane.rect);
+          const hit = intersectRects(rect, pane.rect);
           if (hit) passes.push(hit);
         }
-        if (passes.length === 0) continue;
+      }
+      const blitted = pane.blitted;
+      pane.blitted = false;
+      pane.placed = false;
+      if (passes.length === 0) {
+        // pixels moved and nothing else owed: they still go out
+        if (blitted) pane.wnd.present?.();
+        continue;
       }
       pane.full = false;
       this._paintPane(pane, passes);

package/src/nodes/animation.js

@@ -215,6 +215,7 @@ export class NodeAnimation {
           false,
           insetRect(this.paintBounds(), -shrank),
           'shadow',
+          this,
         );
       }
     }
@@ -235,6 +236,7 @@ export class NodeAnimation {
           false,
           insetRect(this.paintBounds(), -shrank),
           'outline',
+          this,
         );
       }
     }

package/src/nodes/damage.js

@@ -49,6 +49,14 @@ export const layoutDiff = {
   // diff reports only the children that landed somewhere else. Null everywhere
   // else, and restored through `finally` like the sink beside it.
   shift: null,
+
+  // True when `shift` is a `<glarea>` child's own move rather than a scroll
+  // (src/glnodes.js, `_absolutizeChild`, issue #644): the overlay moves the
+  // child's pixels on its pane, and a node that lands where it was plus the
+  // shift is carried by that. A node that turns the diff off under a shift —
+  // a scroll pane laid out again, whose box would have claimed its children
+  // — claims its own box instead, since the move claimed nothing for it.
+  ride: false,
 };
 
 // What an invalidate() may name as its reason — a small closed set, so the

package/src/nodes/invalidate.js

@@ -18,6 +18,20 @@ import { BLIT_POISONED } from './scrollblit.js';
 import { DEV } from './util.js';
 import { debugPaint } from './window/debugpaint.js';
 
+// Which damage lists a claim belongs in (`WindowInvalidate._paneReach`).
+const WINDOW_ONLY = 0;
+const BOTH = 1;
+const PANES_ONLY = 2;
+
+/** Is `node` inside a `<glarea>` below `root` — drawn on its panes, and
+ * never by the window's own paint walk? */
+function insideSurface(node, root) {
+  for (let n = node.parent; n && n !== root; n = n.parent) {
+    if (n.isGlArea) return true;
+  }
+  return false;
+}
+
 /** Node's half of invalidation, installed onto `Node.prototype` by node.js. */
 export class NodeInvalidate {
   /**
@@ -40,7 +54,10 @@ export class NodeInvalidate {
     // reaches — a shadow, an outline, a scene element's ink — so its cached
     // paint reach goes with the claim
     if (damage === this || damage === null) this._clearPaintBounds();
-    this.root?.invalidate(layoutChanged, damage, reason);
+    // …and names itself, so a rect it claims goes to the damage lists it can
+    // reach — the window's, a `<glarea>`'s panes', or both
+    // (`WindowNode._paneReach`)
+    this.root?.invalidate(layoutChanged, damage, reason, this);
   }
 
   /**
@@ -112,7 +129,7 @@ export class NodeInvalidate {
     // Same walk, same frame, same answer — see `_childListBefore`, whose
     // record this shares so that a reflow and a child-list change on one
     // node in one frame walk the subtree once between them.
-    root.invalidate(true, this._childListBefore(), reason);
+    root.invalidate(true, this._childListBefore(), reason, this);
     root._reflowed.add(this);
   }
 
@@ -235,8 +252,14 @@ export class WindowInvalidate {
    * diagnostic, collected per frame into `_lastReasons` so the frame log,
    * REACT_X11_DEBUG_PAINT=full and the tracer can attribute a repaint.
    * Omitting it costs nothing but attribution.
+   *
+   * `source` is the node making a claim that names a rect rather than a
+   * node — `Node.invalidate` passes itself — and is what decides which of
+   * the frame's two lists the claim goes to: the window's, the one the
+   * panes over its `<glarea>`s paint from, or both (`_paneReach`). Left
+   * out, both.
    */
-  invalidate(layoutChanged, damage = null, reason = null) {
+  invalidate(layoutChanged, damage = null, reason = null, source = null) {
     if (this.destroyed || !this.window) return;
     if (!layoutChanged && damage === NO_DAMAGE) {
       // Nothing this node draws changed, so it contributes no region — and
@@ -274,6 +297,16 @@ export class WindowInvalidate {
       this._scheduleFrame();
       return;
     }
+    // The panes over this window's `<glarea>`s paint from a list of their
+    // own (`_paneDamage`): a claim goes to the window's list, the panes',
+    // or both, by what its source can reach (`_paneReach`). One `size`
+    // read for a window with no surface children.
+    const reach =
+      this._overlaid.size !== 0
+        ? this._paneReach(damage?.kind ? damage : source)
+        : WINDOW_ONLY;
+    const panes = reach !== WINDOW_ONLY;
+    const windowToo = reach !== PANES_ONLY;
     if (layoutChanged) {
       this.needsLayout = true;
       // The content floors are measured from the tree, so anything that
@@ -314,8 +347,11 @@ export class WindowInvalidate {
     // where nothing can be seen, so it owes no pixels), and null on a frame
     // that is already unbounded, which owes neither a rect nor the subtree
     // walk that measures one — a blit cannot fire there either.
+    const bounded =
+      (windowToo && this._damage !== FULL_DAMAGE) ||
+      (panes && this._paneDamage !== FULL_DAMAGE);
     const bounds =
-      damage && damage !== NO_DAMAGE && this._damage !== FULL_DAMAGE
+      damage && damage !== NO_DAMAGE && bounded
         ? damage._claimBounds
           ? damage._claimBounds()
           : damage
@@ -324,6 +360,9 @@ export class WindowInvalidate {
     if (pendingScrolls?.size && bounds && this._scrollClaim !== damage) {
       const rect = bounds;
       for (const sv of pendingScrolls) {
+        // A claim the window's list never sees is no change to the pixels
+        // a blit of the window's moves: a surface's children are on panes
+        if (!windowToo && !insideSurface(sv, this)) continue;
         // An element blitting a region of its own drawing (issue #303) is
         // waiting on that region, not on the whole node it lives in — and
         // it is waiting on it *exactly* (issue #309). Its claim is the rect
@@ -363,25 +402,102 @@ export class WindowInvalidate {
         }
       }
     }
-    if (layoutChanged && !damage) this._damage = FULL_DAMAGE;
-    else if (!layoutChanged && !damage) this._damage = FULL_DAMAGE;
-    else if (!bounds) {
+    if (!damage) {
+      // "something, somewhere" — in the panes alone, for a node whose
+      // pixels are only ever on one; everywhere, for anything else
+      if (windowToo) this._damage = FULL_DAMAGE;
+      else this._damage ??= [];
+      if (panes) this._paneDamage = FULL_DAMAGE;
+    } else if (!bounds) {
       // A layout change that names no region: either NO_DAMAGE, from a
       // caller with a finer claim already in flight, or a node whose reach
       // a clipping ancestor left nothing of (issue #398). Unlike `!damage`
-      // neither is "something, somewhere", so neither costs a full repaint.
-    } else if (this._damage !== FULL_DAMAGE) {
+      // neither is "something, somewhere", so neither costs a full repaint
+      // — which a frame with no list at all would be, however little its
+      // layout pass goes on to claim (`_takeDamage`). A child of a
+      // `<glarea>` that only moved is this claim (issue #644), and a frame
+      // whose move is settled on a pane claims only the strips it uncovered.
+      this._damage ??= [];
+    } else {
       // a node, or a bare rect for a caller that has a region rather than a
       // node — a subtree that is about to be removed, say. Claims accumulate
       // as a list of rects rather than one box around them all, so two changes
       // at opposite corners of the window no longer repaint everything
       // between them.
-      this._damage = addDamageRect(this._damage, bounds, this._damageRectCap());
+      if (!windowToo) {
+        // the window owes nothing, and a frame with no list is unbounded
+        this._damage ??= [];
+      } else if (this._damage !== FULL_DAMAGE) {
+        this._damage = addDamageRect(
+          this._damage,
+          bounds,
+          this._damageRectCap(),
+        );
+      }
+      if (panes) this._addPaneDamage(bounds);
     }
     this.needsPaint = true;
     this._scheduleFrame();
   }
 
+  /**
+   * Which damage lists a claim from `node` belongs in: the window's, the
+   * panes' over its `<glarea>`s, or both. The panes hold the surfaces'
+   * children and nothing else (src/gloverlay.js), and the window paints
+   * none of those, so:
+   *
+   * - a node inside a surface is the panes' alone — the window's pass under
+   *   the surface would repaint pixels no child of it ever had;
+   * - a node above a surface is both: its colour or font is what the
+   *   children below it paint with. So is a surface itself, whose
+   *   `clearColor` an X11 pane's ground is, and so is a claim with no
+   *   source to go by;
+   * - anything else is the window's alone. It draws only into the window,
+   *   where the surface covers it: a graph pane under the surface that its
+   *   own pan claims whole every frame (issue #644) is the claim this keeps
+   *   out of the panes' repaint.
+   */
+  _paneReach(node) {
+    if (!node || node === this) return BOTH;
+    if (insideSurface(node, this)) return PANES_ONLY;
+    if (node.isGlArea) return BOTH;
+    for (const area of this._overlaid) {
+      for (let n = area.parent; n && n !== this; n = n.parent) {
+        if (n === node) return BOTH;
+      }
+    }
+    return WINDOW_ONLY;
+  }
+
+  /** One rect more for the panes, unless they repaint whole already. */
+  _addPaneDamage(rect) {
+    if (this._paneDamage === FULL_DAMAGE) return;
+    this._paneDamage = addDamageRect(
+      this._paneDamage,
+      rect,
+      this._damageRectCap(),
+    );
+  }
+
+  /**
+   * What the panes repaint this frame: null for all of them, and — unlike
+   * the window's list — an empty list when nothing reached them, which is
+   * most frames of a window whose surface children hold still.
+   */
+  _takePaneDamage(width, height) {
+    const damage = this._paneDamage;
+    this._paneDamage = null;
+    if (damage === FULL_DAMAGE) return null;
+    if (!damage || damage.length === 0) return [];
+    const rects = [];
+    for (const claimed of damage) {
+      const clamped = this._clampDamage(claimed, width, height);
+      if (clamped === FULL_DAMAGE) return null;
+      if (clamped) rects.push(clamped);
+    }
+    return damageToPaint(rects);
+  }
+
   /**
    * The rects this frame will repaint, or null for the whole window.
    *

package/src/nodes/node.js

@@ -13,6 +13,7 @@ import {
   applyLayoutStyle,
   applyLayoutDefaults,
   createLayoutNode,
+  onlyInsetsChanged,
   paintPropsChanged,
   isEventProp,
 } from '../styles.js';
@@ -473,10 +474,10 @@ export class Node {
     // `_reflowed` would undo both — its post-layout claim is this node's
     // box, the whole band the blit is about to move.
     if (this._blitLedgerOpen()) {
-      root.invalidate(true, before ?? NO_DAMAGE, 'child-list');
+      root.invalidate(true, before ?? NO_DAMAGE, 'child-list', this);
       return;
     }
-    root.invalidate(true, before, 'child-list');
+    root.invalidate(true, before, 'child-list', this);
     root._reflowed.add(this);
   }
 
@@ -604,7 +605,21 @@ export class Node {
     // which is what keeps a commit from widening the region to every node
     // it touched.
     if (layoutChanged) {
-      this._invalidateLayout('props');
+      // A child of a `<glarea>` that only moved (issue #644): its pixels are
+      // on a pane, one shift away, and the layout pass reports the move to
+      // the overlay rather than claiming it (src/glnodes.js). A claim of the
+      // subtree here, before and after, would be the repaint the overlay
+      // exists to skip — and the pass claims both ends of the move itself
+      // whenever the overlay cannot move the pixels.
+      if (
+        this.parent?.isGlArea &&
+        onlyInsetsChanged(style, prevStyle) &&
+        !this.paintChanged(newProps, prev)
+      ) {
+        this.invalidate(true, NO_DAMAGE, 'props');
+      } else {
+        this._invalidateLayout('props');
+      }
     } else {
       // The style half is asked here rather than inside `paintChanged`, and
       // stays core's answer: what a style change moves is the background,
@@ -632,12 +647,16 @@ export class Node {
    * safe without knowing about subclasses: `<image src>`, `<canvas onDraw>`,
    * a `value`, a `placeholder`, a `caretColor` — any prop a subclass paints
    * from is a prop, so a change to it lands here as an inequality and damages
-   * the node. Three kinds are skipped because they cannot affect this node's
+   * the node. Four kinds are skipped because they cannot affect this node's
    * own drawing:
    *
    *  - `children`, which the reconciler mutates through appendChild /
    *    removeChild / commitTextUpdate, each of which invalidates on its own;
    *  - event handlers, rebuilt every render and never painted;
+   *  - `ref`, which is React's rather than the element's. Since React 19 it
+   *    arrives as an ordinary prop, so an inline callback is a new function
+   *    every render, like a handler. `key` would be the same if React ever
+   *    passed it on; today React strips it;
    *  - `style`, compared by value by the caller — so a style object React
    *    rebuilt with the same contents costs nothing, which is the whole
    *    point, since React rebuilds sibling styles on every render and a
@@ -669,6 +688,7 @@ export class Node {
     const keys = new Set([...Object.keys(newProps), ...Object.keys(prev)]);
     for (const key of keys) {
       if (key === 'children' || key === 'style' || isEventProp(key)) continue;
+      if (key === 'ref' || key === 'key') continue;
       if (claimed.has(key)) continue;
       if (newProps[key] !== prev[key]) return true;
     }

package/src/nodes/position.js

@@ -317,6 +317,7 @@ export class WindowPosition {
       nodes.sort((a, b) => depth.get(a) - depth.get(b));
     }
     const cap = this._damageRectCap();
+    const panes = this._overlaid.size !== 0;
     const t = now();
     let claimed = false;
     for (const node of nodes) {
@@ -330,7 +331,12 @@ export class WindowPosition {
           ? node.paintBounds()
           : null;
       node._placedShown = after;
-      if (this._damage === FULL_DAMAGE) continue;
+      if (
+        this._damage === FULL_DAMAGE &&
+        (!panes || this._paneDamage === FULL_DAMAGE)
+      ) {
+        continue;
+      }
       const sv = node._blitViewport();
       let was = before;
       if (was && sv) {
@@ -354,7 +360,10 @@ export class WindowPosition {
         if (sv && !sv._recordBlitClaim(claim)) {
           sv._pendingBlitFrom = BLIT_POISONED;
         }
-        this._damage = addDamageRect(this._damage, claim, cap);
+        if (this._damage !== FULL_DAMAGE) {
+          this._damage = addDamageRect(this._damage, claim, cap);
+        }
+        if (panes) this._addPaneDamage(claim);
         claimed = true;
       }
     }

package/src/nodes/scrollable.js

@@ -297,8 +297,11 @@ export const Scrollable = (Base) =>
             // …which holds for a scroll's shift and not for the clamp's: the
             // content shrank, or the viewport grew, under the offset — a row
             // collapsing at the end of a list scrolled to its end — and
-            // nothing claimed the viewport every child just moved in.
-            if (clamped) outer(vp);
+            // nothing claimed the viewport every child just moved in. Nor
+            // for a `<glarea>` child's move that this pane rides (issue
+            // #644): its box claimed nothing, and a pane laid out again may
+            // have moved rows the move's copy carries where they were.
+            if (clamped || layoutDiff.ride) outer(vp);
           } else {
             layoutDiff.sink = (rect) => {
               const clipped = intersectRects(rect, vp);

package/src/nodes/scrollblit.js

@@ -409,7 +409,7 @@ export class NodeScrollBlit {
     // reason to un-blit it. `state.rect` by identity, so a second call this
     // frame is recognised as the same claim rather than as foreign damage.
     root._scrollClaim = state.rect;
-    root.invalidate(false, state.rect, 'scroll');
+    root.invalidate(false, state.rect, 'scroll', this);
     root._scrollClaim = null;
     return this._pendingBlitFrom !== BLIT_POISONED;
   }
@@ -485,8 +485,10 @@ export class WindowScrollBlit {
     // claim the scroll recorded, like every other declined gate here
     if (from === BLIT_POISONED) return;
     if (NO_SCROLL_BLIT || !from || node.destroyed || node.root !== this) return;
-    const wnd = this.window;
-    if (typeof wnd?.scrollRegion !== 'function') return; // ntk without #139
+    // the window's backing store, or the pane over a `<glarea>` that holds
+    // the pixels of a node inside it — none where neither can move them
+    const target = this._blitTarget(node);
+    if (!target) return;
     // the debug overlays and the DevTools highlight draw over the whole
     // window; a blit would drag shifted copies of them along
     if (
@@ -497,7 +499,8 @@ export class WindowScrollBlit {
     ) {
       return;
     }
-    if (!Array.isArray(this._damage)) return; // unbounded frame already
+    // unbounded already, on the surface the blit would move
+    if (!Array.isArray(target.damage)) return;
     // the layout diff claimed real movement this pass — the frame is not a
     // pure scroll, and a blit under rearranged content would shift stale
     // pixels into place the repaint no longer covers
@@ -506,7 +509,7 @@ export class WindowScrollBlit {
     // region and the shift itself (issue #303), where a scroll container is
     // its whole viewport shifted by the change in its offsets.
     if (contents) {
-      this._applyContentsBlit(node, contents, width, height);
+      this._applyContentsBlit(node, contents, width, height, target);
       return;
     }
     // Back where the frame started: a burst of scrolls that went one way
@@ -518,14 +521,14 @@ export class WindowScrollBlit {
     // (Every pixel-shift gate below is moot for a shift of nothing.)
     if (from.x === node.scrollX && from.y === node.scrollY) {
       const box = node.abs;
-      const kept = this._blitKeptDamage(box);
+      const kept = this._blitKeptDamage(box, false, target.damage);
       if (!kept) return;
       let rects = kept;
       for (const claim of ledger ?? []) {
         const inside = intersectRects(claim, box);
         if (inside) rects = addDamageRect(rects, inside);
       }
-      this._damage = rects;
+      target.damage = rects;
       return;
     }
     // children clip to the border box, so a border ring or rounded corner
@@ -575,7 +578,7 @@ export class WindowScrollBlit {
     ) {
       return;
     }
-    const keep = this._blitKeptDamage(vp);
+    const keep = this._blitKeptDamage(vp, false, target.damage);
     if (!keep) return;
     // What changed inside the viewport while the blit was armed, in the
     // coordinates the frame is about to paint in (issue #398). A claim made
@@ -635,7 +638,7 @@ export class WindowScrollBlit {
       ? unionArea([strip, ...repairs]) - rectArea(strip)
       : 0;
     if (repairArea > area * BLIT_MAX_CLAIM_AREA) return;
-    if (!this._scrollBlitSafe(node, vp)) return;
+    if (!this._scrollBlitSafe(node, vp, target.top)) return;
     // The band the scrolled bar's thumb travels in is repaired on its own.
     // The thumb's rects are thin and run along the viewport's edge, and a
     // rect reaching into the band from inside — a column held down the
@@ -730,8 +733,8 @@ export class WindowScrollBlit {
       if (inside) painted += inside.width * inside.height;
     }
     if (painted > area * SCROLL_BLIT_MAX_REPAINT) return;
-    if (!wnd.scrollRegion({ ...vp }, dx, dy)) return;
-    this._damage = rects;
+    if (!target.blit({ ...vp }, dx, dy)) return;
+    target.damage = rects;
   }
 
   /**
@@ -751,12 +754,15 @@ export class WindowScrollBlit {
    * damage cap merges neighbours on its own, without a claim-time gate to
    * poison first. Requiring the rect back unchanged is what lets the
    * claim-time gate narrow to `vp` itself and let furniture beside it live.
+   *
+   * `damage` is the list the blit's surface paints from: the window's, or
+   * its panes' for a node inside a `<glarea>` (`_blitTarget`).
    */
-  _blitKeptDamage(vp, exact = false) {
+  _blitKeptDamage(vp, exact = false, damage = this._damage) {
     const keep = [];
     let sawClaim = false;
     const slopped = insetRect(vp, -(DAMAGE_SLOP + 1));
-    for (const rect of this._damage) {
+    for (const rect of damage) {
       if (!rectsOverlap(rect, vp)) {
         keep.push(rect);
         continue;
@@ -795,7 +801,7 @@ export class WindowScrollBlit {
    * balloon back towards the whole viewport. With no bars the L is two
    * disjoint rects and stays two.
    */
-  _applyContentsBlit(node, { rect: vp, dx, dy }, width, height) {
+  _applyContentsBlit(node, { rect: vp, dx, dy }, width, height, target) {
     // only a whole-pixel shift of a whole-pixel region is a copy
     if (!isIntegerRect(vp)) return;
     if (!Number.isInteger(dx) || !Number.isInteger(dy)) return;
@@ -840,14 +846,14 @@ export class WindowScrollBlit {
       if (child.style?.display === 'none') continue;
       if (rectsOverlap(child._subtreeBounds(), vp)) return;
     }
-    const keep = this._blitKeptDamage(vp, true);
+    const keep = this._blitKeptDamage(vp, true, target.damage);
     if (!keep) return;
     // An ancestor's rounded corners reach into the top and bottom rows of
     // the region (a graph pane inside a rounded card is the common shape):
     // those rows do not translate, so they leave the blit and get repainted
     // as bands — the same carve the element does for its own furniture —
     // and the band that shifts is what is left between them.
-    const bands = this._cornerBands(node, vp);
+    const bands = this._cornerBands(node, vp, target.top);
     const shifted =
       bands.top || bands.bottom
         ? {
@@ -864,11 +870,11 @@ export class WindowScrollBlit {
     ) {
       return;
     }
-    if (!this._scrollBlitSafe(node, shifted)) return;
+    if (!this._scrollBlitSafe(node, shifted, target.top)) return;
     // the element's deltas are already how far the pixels moved, the sense
     // scrollRegion takes (0 + x rather than x: a caller's -0 would survive
     // into request buffers and test comparisons)
-    if (!this.window.scrollRegion({ ...shifted }, 0 + dx, 0 + dy)) return;
+    if (!target.blit({ ...shifted }, 0 + dx, 0 + dy)) return;
     let rects = keep;
     if (bands.top) {
       rects = addDamageRect(rects, {
@@ -908,7 +914,7 @@ export class WindowScrollBlit {
         height: vp.height - Math.abs(dy),
       });
     }
-    this._damage = rects;
+    target.damage = rects;
   }
 
   /**
@@ -916,11 +922,13 @@ export class WindowScrollBlit {
    * corners reach into — the rows an element blit has to leave behind and
    * repaint, so that what shifts stays clear of every corner square
    * (`_scrollBlitSafe`). Whole pixels, and zero when no corner reaches in.
+   * Ancestors below `upTo`, the node the blit's surface belongs to
+   * (`_blitTarget`): a pane is a rectangle no corner above it clips.
    */
-  _cornerBands(node, vp) {
+  _cornerBands(node, vp, upTo = this) {
     let top = 0;
     let bottom = 0;
-    for (let n = node.parent; n && n !== this; n = n.parent) {
+    for (let n = node.parent; n && n !== upTo; n = n.parent) {
       const radius = n.style?.borderRadius ?? 0;
       if (!(radius > 0) || !n.abs) continue;
       if (!cornerSquaresOverlap(n.abs, radius, vp)) continue;
@@ -940,13 +948,18 @@ export class WindowScrollBlit {
    * the viewport — an overlapping sibling, an ancestor's border ring or
    * rounded corner, an enclosing viewport's scrollbar — would have its
    * pixels dragged along by the blit, so any of them is a no.
+   *
+   * "Outside" is below `top`, the node whose subtree the blit's surface
+   * holds (`_blitTarget`): the window, or a `<glarea>` whose pane holds
+   * only its own children — what the window draws under the surface was
+   * never in the pane's pixels.
    */
-  _scrollBlitSafe(scroller, vp) {
+  _scrollBlitSafe(scroller, vp, top = this) {
     // the window itself scrolls: everything inside it *is* the scrolled
     // content, so there is nothing that could be dragged along
     if (scroller === this) return true;
     const ancestors = new Set();
-    for (let n = scroller.parent; n && n !== this; n = n.parent) {
+    for (let n = scroller.parent; n && n !== top; n = n.parent) {
       ancestors.add(n);
     }
     const check = (parent) => {
@@ -993,7 +1006,60 @@ export class WindowScrollBlit {
       }
       return true;
     };
-    return check(this);
+    return check(top);
+  }
+
+  /**
+   * Where a blit for `node` moves pixels, as `{ top, blit(rect, dx, dy),
+   * damage }` — `blit` with `Window.scrollRegion`'s contract, `top` the node
+   * whose subtree that surface holds, `damage` the list it paints from and
+   * the blit narrows — or null when nothing can.
+   *
+   * The window's backing store, for a node the window paints. A node inside
+   * a `<glarea>` is painted on the pane over the surface instead
+   * (src/gloverlay.js), and the window's pixels under the surface are none
+   * of its: shifting them moved nothing on screen while the strip-only
+   * repaint left the pane holding the scroll's old frame (issue #644). So
+   * the pane that holds the rect moves it, or the frame repaints — a pane
+   * owed a paint whole, or none holding the whole rect, is a refusal like
+   * any other here.
+   */
+  _blitTarget(node) {
+    for (let n = node.parent; n && n !== this; n = n.parent) {
+      if (!n.isGlArea) continue;
+      const overlay = n._overlay;
+      if (!overlay) return null;
+      const root = this;
+      return {
+        top: n,
+        blit: (rect, dx, dy) => {
+          const pane = overlay.panes.find((p) => p.canBlit(rect));
+          return pane ? pane.blit(rect, dx, dy) : false;
+        },
+        // the panes' list: a scroll inside a surface claims nothing in the
+        // window's, which paints none of its children (`_paneReach`)
+        get damage() {
+          return root._paneDamage;
+        },
+        set damage(rects) {
+          root._paneDamage = rects;
+        },
+      };
+    }
+    const wnd = this.window;
+    // an ntk without #139, or a presenter with no bitmap to move
+    if (typeof wnd?.scrollRegion !== 'function') return null;
+    const root = this;
+    return {
+      top: this,
+      blit: (rect, dx, dy) => wnd.scrollRegion(rect, dx, dy),
+      get damage() {
+        return root._damage;
+      },
+      set damage(rects) {
+        root._damage = rects;
+      },
+    };
   }
 
   /**

package/src/nodes/window/flush.js

@@ -101,8 +101,8 @@ export class WindowFlush {
     return changed;
   }
 
-  /** …and their paint, with the frame's own damage: a claim inside a
-   * `<glarea>`'s children is in that list like any other. */
+  /** …and their paint, with the damage the panes are owed — their own
+   * list, which the claims that can reach them go to (`_paneReach`). */
   _paintOverlays(damage) {
     for (const area of this._overlaid) area._paintOverlay(damage);
   }
@@ -195,13 +195,21 @@ export class WindowFlush {
       // A bounded frame watches the walk: whatever this pass actually moved
       // claims its old and new rects through the sink, and the frame stays
       // a few rects instead of the whole window. An unbounded frame skips
-      // the bookkeeping — it repaints everything anyway.
-      if (this._damage !== FULL_DAMAGE) {
+      // the bookkeeping — it repaints everything anyway — unless the panes
+      // over a `<glarea>` are still bounded: they paint from a list of
+      // their own, and a move of the children they hold is theirs to claim.
+      const panes = this._overlaid.size !== 0;
+      if (
+        this._damage !== FULL_DAMAGE ||
+        (panes && this._paneDamage !== FULL_DAMAGE)
+      ) {
         const cap = this._damageRectCap();
         layoutDiff.sink = (rect) => {
-          if (this._damage === FULL_DAMAGE) return;
-          layoutMoved = true;
-          this._damage = addDamageRect(this._damage, rect, cap);
+          if (this._damage !== FULL_DAMAGE) {
+            layoutMoved = true;
+            this._damage = addDamageRect(this._damage, rect, cap);
+          }
+          if (panes) this._addPaneDamage(rect);
         };
       }
       try {
@@ -233,7 +241,13 @@ export class WindowFlush {
       for (const node of this._reflowed) {
         // …and the pre-mutation walk this frame reused goes with it
         node._reflowBefore = null;
-        if (node.destroyed || this._damage === FULL_DAMAGE) continue;
+        if (
+          node.destroyed ||
+          (this._damage === FULL_DAMAGE &&
+            (!panes || this._paneDamage === FULL_DAMAGE))
+        ) {
+          continue;
+        }
         // clipped to a blitting viewport above it, like every other claim
         // this frame, and written to that viewport's ledger too (issue
         // #398): the claim would otherwise coalesce into the scroll's own
@@ -245,11 +259,14 @@ export class WindowFlush {
         if (sv && !sv._recordBlitClaim(after)) {
           sv._pendingBlitFrom = BLIT_POISONED;
         }
-        this._damage = addDamageRect(
-          this._damage,
-          after,
-          this._damageRectCap(),
-        );
+        if (this._damage !== FULL_DAMAGE) {
+          this._damage = addDamageRect(
+            this._damage,
+            after,
+            this._damageRectCap(),
+          );
+        }
+        if (panes) this._addPaneDamage(after);
       }
       this._reflowed.clear();
     } else if (this._reflowed.size) {
@@ -286,6 +303,10 @@ export class WindowFlush {
     if (!this.needsPaint) return false;
     this.needsPaint = false;
     const damage = this._takeDamage(width, height);
+    // …and the panes' own, which they paint instead of the window's
+    const paneDamage =
+      this._overlaid.size !== 0 ? this._takePaneDamage(width, height) : null;
+    this._paneDamage = null;
     if (debugPaint === 'full' && !damage && width > 0 && height > 0) {
       // Silent full-window repaints are the perf bug class this renderer
       // actually has (see AGENTS.md); this is what surfaces them. The stack
@@ -305,8 +326,8 @@ export class WindowFlush {
     // list was still taken (its bookkeeping is what keeps the two paths one
     // code) and is simply not consumed; the presenter diffs at the layer.
     if (typeof this.window.presentFrame === 'function') {
-      // the panes are no presenter's: they paint from the damage either way
-      if (this._overlaid.size !== 0) this._paintOverlays(damage);
+      // the panes are no presenter's: they paint from their damage either way
+      if (this._overlaid.size !== 0) this._paintOverlays(paneDamage);
       this.window.presentFrame(this, damage);
       this.app._reactX11Startup?.painted();
       return true;
@@ -328,10 +349,11 @@ export class WindowFlush {
     for (const rect of damage ?? [null]) {
       this._paintRegion(ctx, rect, width, height);
     }
-    // …and the panes over the surfaces, with the same damage: a claim from
+    // …and the panes over the surfaces, with their own damage: a claim from
     // a `<glarea>`'s children is theirs to repaint — the window's pass under
-    // the surface is one nobody sees. Inside the cache's frame, like a pass.
-    if (this._overlaid.size !== 0) this._paintOverlays(damage);
+    // the surface is one nobody sees — and one from a node that cannot reach
+    // them is not. Inside the cache's frame, like a pass.
+    if (this._overlaid.size !== 0) this._paintOverlays(paneDamage);
     // after every region: an entry drawn in one damage rect must not be
     // evicted before the next rect of the same frame asks for it
     this._paintCache?.endFrame();

package/src/nodes/window/window.js

@@ -205,6 +205,10 @@ export class WindowNode extends Scrollable(Node) {
     // and paints with its damage (nodes/window/flush.js, src/gloverlay.js).
     // Empty is one `size` read a frame.
     this._overlaid = new Set();
+    // …and the damage their panes repaint, a list beside the window's:
+    // each claim goes to one or both by what it can reach (`_paneReach`).
+    // Null with nothing owed.
+    this._paneDamage = null;
     this.events = new EventManager(this);
     // ids of the child windows in the order the *server* stacks them,
     // bottom to top — see _restackWindowChildren

package/src/styles.js

@@ -2008,6 +2008,28 @@ function samePosition(a, b) {
   return true;
 }
 
+/**
+ * Whether the only properties that differ between two resolved styles are
+ * the insets — `left`, `top` and the rest: a box that moved, and drew
+ * nothing differently (issue #644). Every other key counts, whether layout,
+ * paint or text reads it, so a style that also changed anything else
+ * answers false.
+ */
+export function onlyInsetsChanged(props, oldProps = {}) {
+  let moved = false;
+  for (const key of Object.keys(props)) {
+    if (props[key] === oldProps[key]) continue;
+    if (!INSETS.has(key)) return false;
+    moved = true;
+  }
+  for (const key of Object.keys(oldProps)) {
+    if (key in props) continue;
+    if (!INSETS.has(key)) return false;
+    moved = true;
+  }
+  return moved;
+}
+
 /** @returns true if any paint-only prop changed */
 export function paintPropsChanged(props, oldProps = {}) {
   for (const key of PAINT_PROPS) {