@perspective-dev/viewer-charts 4.5.2 → 5.1.0

package/dist/esm/plugin/charts.d.ts

@@ -30,9 +30,12 @@ export interface ChartTypeConfig {
      * Per-chart-type overrides for `DEFAULT_PLUGIN_CONFIG`. Used when a
      * field's sensible default differs by chart family — currently
      * `include_zero` (true for Y Bar / Y Area / X Bar, false for line
-     * / scatter / cartesian / financial). Applied at schema generation
-     * and at `restore({})` so the effective default matches the
-     * surfaced UI default.
+     * / scatter / cartesian / financial) and `facet_mode` ("overlay"
+     * for the band-pipeline families — series / financial — whose
+     * historical split_by rendering is the single stacked/colored
+     * plot; "grid" elsewhere). Applied at schema generation and at
+     * `restore({})` so the effective default matches the surfaced UI
+     * default.
      */
     plugin_field_defaults?: Partial<PluginConfig>;
 }

package/dist/esm/plugin/plugin.d.ts

@@ -10,7 +10,6 @@ export declare class HTMLPerspectiveViewerWebGLPluginElement extends HTMLElement
     private _renderer;
     private _rendererPromise;
     private _rawEventForwarder;
-    private _generation;
     private _resetClickAbort;
     /**
      * Plugin-scoped global config. Seeded lazily from
@@ -26,6 +25,15 @@ export declare class HTMLPerspectiveViewerWebGLPluginElement extends HTMLElement
      * resolved values in the `InitMsg`.
      */
     private _pluginConfigStore;
+    /**
+     * Per-column config (`alt_axis`, `chart_type`, formats, …), held on
+     * the element for the same reason as `_pluginConfigStore`: the host
+     * calls `restore()` BEFORE the first draw builds the renderer, so
+     * forwarding only to a live renderer silently drops the initial
+     * `columns_config` — `_buildRenderer` ships it in the `InitMsg`
+     * instead.
+     */
+    private _columnsConfig;
     private get _pluginConfig();
     private set _pluginConfig(value);
     private _effectiveDefaults;
@@ -97,10 +105,40 @@ export declare class HTMLPerspectiveViewerWebGLPluginElement extends HTMLElement
     };
     draw(view: View): Promise<void>;
     update(view: View): Promise<void>;
+    /**
+     * Shared body of `draw` / `update`. No re-entrancy guard: the host
+     * serializes every rendering call (`draw`, `update`, `render`,
+     * `resize`) and `delete` on its per-renderer draw lock, so this
+     * method never overlaps itself or a teardown. The one exception —
+     * an external DOM disconnect `delete()`ing the element mid-draw —
+     * is absorbed by `RendererTransport`, whose post-`destroy()`
+     * requests settle immediately instead of pending forever.
+     */
     private _drawImpl;
     clear(): Promise<void>;
     resize(): Promise<void>;
-    restyle(): number;
+    /**
+     * OPTIONAL host presize protocol: render at the TARGET element box
+     * `(width, height)` — the box the host's pending layout commit will
+     * produce — holding the resulting frame offscreen, so nothing on
+     * screen changes during the round-trip. Resolves, once the resized
+     * frame is staged, to a present closure; the host calls it in the
+     * same task as the layout commit, landing geometry and pixels in
+     * one paint. Plugins without this method get the host's held
+     * style-override presize path instead.
+     */
+    presize(width: number, height: number): Promise<(() => void) | void>;
+    restyle(): void;
+    /**
+     * Clear any active selection state (pinned tooltip) WITHOUT emitting
+     * selection events — the host calls this when a global filter
+     * contributed by this panel's selection is removed from the global
+     * filter bar, so the pin can't outlive the filter it produced. The
+     * transport's `_lastInsertConfig` (remove-set memory) is deliberately
+     * RETAINED so a subsequent selection still replaces any leftover
+     * clauses rather than accumulating.
+     */
+    deselect(): Promise<void>;
     render(view: View): Promise<Blob>;
     restore(config: any, columns_config?: Record<string, any>): void;
     delete(): void;

package/dist/esm/render/scheduler.d.ts

@@ -1,16 +1,19 @@
 import type { WebGLContextManager } from "../webgl/context-manager";
 /**
- * Request a coalesced render of `glManager` whose body is
- * `fullRender`. Returns a promise that resolves when this entry's
- * Phase 2 (`awaitGpuFence` + `endFrame`) completes.
+ * Request a coalesced render of `glManager`. `fullRender` submits the
+ * GL commands (Phase 1, synchronous); `render2D` draws the 2D layers
+ * (gridlines + chrome) and runs in Phase 2 *after* `awaitGpuFence`, so
+ * the 2D canvases don't present ahead of the GL frame. Returns a
+ * promise that resolves when this entry's Phase 2 (`awaitGpuFence` +
+ * `render2D` + `endFrame`) completes.
  *
  * If a request is already pending for the same glManager, the new
- * call's `fullRender` closure replaces the prior one (latest call
- * wins; closures read chart state lazily so this is functionally a
- * no-op, but keeps the closure fresh) and the returned promise
- * resolves alongside the existing waiters.
+ * call's `fullRender` / `render2D` closures replace the prior ones
+ * (latest call wins; closures read chart state lazily so this is
+ * functionally a no-op, but keeps the closures fresh) and the returned
+ * promise resolves alongside the existing waiters.
  */
-export declare function requestRender(glManager: WebGLContextManager, fullRender: () => void): Promise<void>;
+export declare function requestRender(glManager: WebGLContextManager, fullRender: () => void, render2D: () => void): Promise<void>;
 /**
  * Run `op` synchronously if no drain `present()` is currently active
  * for `glManager`. Otherwise queue `op` to run as soon as that

package/dist/esm/transport/protocol.d.ts

@@ -9,8 +9,8 @@ export type { ThemeSnapshot };
  * host's real `Client` — that's pure protobuf bytes; this one is the
  * chart's own renderer control plane.
  */
-export type ControlMsg = InitMsg | SetViewByNameMsg | SetColumnsConfigMsg | SetPluginConfigMsg | SetBufferMaxCapacityMsg | LoadAndRenderMsg | RedrawMsg | ResizeMsg | ClearMsg | InvalidateThemeMsg | RestoreZoomMsg | ResetAllZoomsMsg | ResetExpandedDomainMsg | SaveZoomReqMsg | SnapshotPngReqMsg | InteractionMsg | DestroyMsg;
-export type WorkerMsg = ReadyMsg | ZoomChangedMsg | SaveZoomReplyMsg | SnapshotPngReplyMsg | PinTooltipMsg | DismissTooltipMsg | SetCursorMsg | UserClickMsg | UserSelectMsg | LoadAndRenderAckMsg | FrameBitmapMsg | ErrorMsg;
+export type ControlMsg = InitMsg | SetViewByNameMsg | SetColumnsConfigMsg | SetPluginConfigMsg | SetBufferMaxCapacityMsg | LoadAndRenderMsg | RedrawMsg | DeselectMsg | ResizeMsg | ClearMsg | InvalidateThemeMsg | RestoreZoomMsg | ResetAllZoomsMsg | ResetExpandedDomainMsg | SaveZoomReqMsg | SnapshotPngReqMsg | InteractionMsg | DestroyMsg;
+export type WorkerMsg = ReadyMsg | ZoomChangedMsg | SaveZoomReplyMsg | SnapshotPngReplyMsg | PinTooltipMsg | DismissTooltipMsg | SetCursorMsg | UserClickMsg | UserSelectMsg | LoadAndRenderAckMsg | ResizeAckMsg | FrameBitmapMsg | ErrorMsg;
 /**
  * Session-tagged envelopes for the shared-worker transport. Every
  * message between the host and the shared `Worker` carries a numeric
@@ -104,6 +104,14 @@ export interface InitMsg {
      * a `setPluginConfig` control msg.
      */
     pluginConfig: PluginConfig;
+    /**
+     * Initial per-column config (`alt_axis`, `chart_type`, formats, …).
+     * Seeds the chart impl before the first `loadAndRender` — the host
+     * calls `plugin.restore` before the renderer exists, so without
+     * this the initial `columns_config` never reaches the worker.
+     * Later changes arrive as `setColumnsConfig` control msgs.
+     */
+    columnsConfig?: Record<string, any>;
     defaultChartType?: string;
     /**
      * Pre-resolved CSS-variable theme snapshot from the host.
@@ -230,12 +238,41 @@ export interface LoadAndRenderAckMsg {
 export interface RedrawMsg {
     kind: "redraw";
 }
+/**
+ * Host → worker: silently clear the chart's selection state (pinned
+ * tooltip) — no `userSelect` reply, so the host filter-bar removal that
+ * triggered it can't echo back into the host's filter set. The worker's
+ * `TooltipController.dismiss()` posts `dismissTooltip` to tear down the
+ * host-side pinned artifact.
+ */
+export interface DeselectMsg {
+    kind: "deselect";
+}
+/**
+ * Host → worker: resize the chart to a new CSS box. Replied with
+ * {@link ResizeAckMsg} AFTER the resized frame PRESENTS — the host's
+ * `plugin.resize()` promise is the viewer's presize contract ("the
+ * plugin has repainted at the target box when this resolves"), so an
+ * ack at message-receipt would let the settings-pane layout commit
+ * against the old-dimensions bitmap (the aspect-ratio warp).
+ */
 export interface ResizeMsg {
     kind: "resize";
+    msgId: number;
     cssWidth: number;
     cssHeight: number;
     dpr: number;
 }
+/**
+ * Worker → host reply to a `ResizeMsg`, posted after the resized
+ * frame's present completes. Always sent — present failures and
+ * torn-down charts included — so the host's awaited promise resolves
+ * deterministically.
+ */
+export interface ResizeAckMsg {
+    kind: "resizeAck";
+    msgId: number;
+}
 export interface ClearMsg {
     kind: "clear";
 }

package/dist/esm/transport/renderer-transport.d.ts

@@ -20,11 +20,21 @@ import type { InteractionEvent } from "./protocol";
  */
 export declare class RendererTransport {
     private _handle;
+    /**
+     * Set by {@link destroy}. Requests allocated after teardown settle
+     * immediately in `_allocPending` — `_post` is already a no-op once
+     * `_handle` is null, so a late request would otherwise never
+     * receive its reply and pend forever.
+     */
+    private _destroyed;
     private _proxyChannel;
     private _proxySession;
     private _client;
     private _view;
     private _tableName;
+    /** Source panel `slot`, tagged onto dispatched interaction events so the
+     * host can route them (master/detail, global filter) to the right panel. */
+    private _panel;
     private _clientWorkerURL;
     private _clientWasm;
     private _chartTag;
@@ -63,6 +73,30 @@ export declare class RendererTransport {
      * canvas's drawing buffer is the worker's transferred GL canvas).
      */
     private _displayCtx;
+    /**
+     * Present-hold state for the staged-present presize protocol
+     * ({@link presize}). While holding, inbound `frameBitmap`s are
+     * STAGED (latest wins) instead of blitted, so the on-screen frame
+     * — old dimensions in the old, unchanged box — stays put until the
+     * host invokes the present closure `presize` resolved to, in the
+     * same task as its layout commit. Entered only by `presize`;
+     * exited by the present closure, by `presize`'s rejection path, or
+     * by `destroy` — every settle path releases the hold or hands the
+     * caller the release.
+     */
+    /**
+     * The last `(cssWidth, cssHeight, dpr)` posted to the worker — at init
+     * or any resize — i.e. the dimensions the worker has already rendered
+     * (or has an in-flight render for). {@link resize} short-circuits when
+     * its measurement matches (±0.5px, the presize protocol's own
+     * threshold): reactive resizes fan in from several host paths per
+     * layout transition (the post-commit fan-out, activation nudges, the
+     * fresh-restore tail), and every worker resize is an unconditional
+     * full re-render.
+     */
+    private _lastPostedSize;
+    private _holdPresent;
+    private _stagedFrame;
     /**
      * Host-side sink for tooltip + cursor side-effects. The chart
      * inside the renderer calls into a `MessageHostSink` that posts
@@ -85,6 +119,7 @@ export declare class RendererTransport {
         client: Client;
         view: View;
         tableName?: string;
+        panel?: string;
         clientWasm: WebAssembly.Module;
         clientWorkerURL: URL;
         chartTag: string;
@@ -98,6 +133,7 @@ export declare class RendererTransport {
         chrome: HTMLCanvasElement;
         facetConfig: FacetConfig;
         pluginConfig: PluginConfig;
+        columnsConfig?: Record<string, any>;
         defaultChartType?: string;
         renderBlitMode: "blit" | "direct";
     }): Promise<void>;
@@ -125,7 +161,8 @@ export declare class RendererTransport {
      * `loadAndRenderAck`. Per the worker's "resolve on stale"
      * contract, a mid-flight cancellation (a newer `loadAndRender`
      * superseding this one) still acks — the host's awaiter just
-     * resolves quietly.
+     * resolves quietly. Calls issued after `destroy()` resolve
+     * immediately (see `_allocPending`).
      */
     loadAndRender(opts: {
         viewerConfig: {
@@ -138,7 +175,41 @@ export declare class RendererTransport {
         };
     }): Promise<void>;
     redraw(): void;
-    resize(): void;
+    /**
+     * Silently clear the worker chart's selection state (pinned tooltip) —
+     * no selection events are emitted; the worker echoes `dismissTooltip`
+     * to drop the host-side pinned artifact. See `DeselectMsg`.
+     */
+    deselect(): void;
+    /**
+     * Resize the chart to the GL canvas's CURRENT CSS box and resolve
+     * once the resized frame has PRESENTED (the worker's `resizeAck`) —
+     * not at message-post, which would let callers proceed while the
+     * old-dimensions bitmap is still on screen. Reactive geometry
+     * changes only; anticipated ones go through {@link presize}.
+     *
+     * A measurement matching {@link _lastPostedSize} resolves immediately
+     * WITHOUT a worker round trip: the worker has already rendered (or is
+     * presenting) that exact frame, and re-posting would be a full
+     * re-render of an identical bitmap.
+     */
+    resize(): Promise<void>;
+    /**
+     * Staged-present variant of {@link resize}: render at the given
+     * TARGET canvas CSS box (no measurement — the caller supplies the
+     * box the pending layout commit will produce), HOLDING the
+     * resulting frame (and any others that arrive meanwhile) offscreen
+     * instead of blitting, so nothing on screen changes. Resolves,
+     * once the resized frame is staged, to a present closure: calling
+     * it blits the latest staged frame and exits the hold — the host
+     * runs it in the same task as its layout commit so geometry and
+     * pixels land in one paint. On rejection (teardown) the hold is
+     * released here, so every settle path either frees the display or
+     * hands the caller the release.
+     */
+    presize(cssWidth: number, cssHeight: number): Promise<(() => void) | void>;
+    private _postResize;
+    private _presentStaged;
     clear(): void;
     invalidateTheme(): void;
     saveZoom(): Promise<void>;
@@ -146,7 +217,8 @@ export declare class RendererTransport {
      * Allocate a pending request slot of the given `kind`. Returns the
      * id (encoded into the outgoing `ControlMsg`) and a promise that
      * resolves / rejects when the matching reply arrives or
-     * `destroy()` drains the table.
+     * `destroy()` drains the table. Requests issued *after* `destroy()`
+     * settle immediately with the same per-kind semantics as the drain.
      */
     private _allocPending;
     restoreZoom(state: any): void;

package/dist/esm/webgl/instanced-attrs.d.ts

@@ -34,11 +34,17 @@ export declare function createQuadCornerBuffer(gl: GL): WebGLBuffer;
  * paint zero data). No-op return `true` when `attr` is negative
  * (optimized-out attribute — drawing the rest is still valid).
  *
+ * `firstInstance` byte-offsets the attribute pointer so the draw's
+ * instance 0 reads element `firstInstance` of the buffer — the WebGL
+ * substitute for a `baseInstance` draw parameter. Faceted renderers
+ * use it to draw a contiguous per-facet sub-range of a shared
+ * instance buffer.
+ *
  * Render-path uses `peek`, never `getOrCreate`: the latter recreates
  * with zero-initialized contents when `_totalCapacity` has grown past
  * the current buffer, which would wipe the previous draw's vertex
  * data and leave `drawArraysInstanced` to render zeros. See
  * {@link BufferPool#peek} for the full rationale.
  */
-export declare function bindInstancedFloatAttr(glManager: WebGLContextManager, instancing: Instancing, attr: number, name: string, components: number): boolean;
+export declare function bindInstancedFloatAttr(glManager: WebGLContextManager, instancing: Instancing, attr: number, name: string, components: number, firstInstance?: number): boolean;
 export {};

package/dist/esm/worker/renderer.worker.d.ts

@@ -72,6 +72,18 @@ export declare class WorkerRenderer {
      */
     loadAndRender(msg: LoadAndRenderMsg): Promise<void>;
     redraw(): void;
+    /**
+     * `redraw`, acked to the host AFTER the frame's present completes —
+     * the reply backing the viewer's presize contract (`ResizeAckMsg`):
+     * `plugin.resize()` must not resolve until the resized frame is
+     * actually on screen. A resize landing mid-present defers its
+     * canvas mutation (`deferIfDraining`), but the redraw's own frame
+     * applies pending dimensions in `beginFrame`, so the present this
+     * awaits IS at the new size. Always acks — a failed present or a
+     * torn-down chart resolves the host's await rather than stranding
+     * it (completion, not success, is the contract).
+     */
+    redrawAck(msgId: number): void;
     resize(cssWidth: number, cssHeight: number, dpr: number): void;
     clear(): void;
     saveZoom(): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer-charts",
-  "version": "4.5.2",
+  "version": "5.1.0",
   "description": "Perspective.js WebGL Plugin",
   "unpkg": "./dist/cdn/perspective-viewer-charts.js",
   "jsdelivr": "./dist/cdn/perspective-viewer-charts.js",

package/src/ts/charts/candlestick/candlestick-render.ts

@@ -224,7 +224,10 @@ export function renderCandlestickFrame(
     chart._lastCatTicks = numericCat
         ? computeNiceTicks(vis.xMin, vis.xMax, 6)
         : null;
-    renderCandlestickChromeOverlay(chart);
+    // Deferred past the GPU fence (see `_defer2D`) so the chrome canvas
+    // doesn't present ahead of the GL glyphs on resize. Reads the
+    // `_last*` frame state set above.
+    chart._defer2D(() => renderCandlestickChromeOverlay(chart));
 }
 
 export function renderCandlestickChromeOverlay(chart: CandlestickChart): void {

package/src/ts/charts/candlestick/candlestick.ts

@@ -92,15 +92,16 @@ export class CandlestickChart extends CategoricalYChart {
     _yDomain: { min: number; max: number } = { min: 0, max: 1 };
 
     /**
-     * `domain_mode: "expand"` accumulators. Hold the running union of
-     * the value-axis (and, in numeric-category mode, category-axis)
-     * extent across data loads. Cleared in `resetExpandedDomain` —
-     * wired from the worker's `resetAllZooms` and from view-config
-     * mutations on `AbstractChart`. `null` whenever the option is
-     * `"fit"` or the accumulator has just been cleared.
+     * `domain_mode: "expand"` accumulator — the VALUE (Y) axis only.
+     * The category axis has NO accumulator on band charts (see
+     * `SeriesChart._expandedLeftDomain`): a numeric/datetime `group_by`
+     * axis always fits the current data. Cleared in
+     * `resetExpandedDomain` — wired from the worker's `resetAllZooms`
+     * and from view-config mutations on `AbstractChart`. `null`
+     * whenever the option is `"fit"` or the accumulator has just been
+     * cleared.
      */
     _expandedYDomain: { min: number; max: number } | null = null;
-    _expandedCategoryDomain: { min: number; max: number } | null = null;
 
     /**
      * Numeric category-axis state (single non-string group_by).
@@ -267,22 +268,17 @@ export class CandlestickChart extends CategoricalYChart {
             scratchCandles: this._candles,
         });
         // `domain_mode: "expand"` post-build union — mirrors the series
-        // pipeline. `expandDomainInPlace` mutates `result.*` so the
-        // assignments below pick up the grown extent automatically.
+        // pipeline: VALUE (Y) axis only, never the category axis (see
+        // `SeriesChart.uploadAndRender`). `expandDomainInPlace` mutates
+        // `result.yDomain` so the assignment below picks up the grown
+        // extent automatically.
         if (this._pluginConfig.domain_mode === "expand") {
             this._expandedYDomain = expandDomainInPlace(
                 this._expandedYDomain,
                 result.yDomain,
             );
-            if (result.numericCategoryDomain) {
-                this._expandedCategoryDomain = expandDomainInPlace(
-                    this._expandedCategoryDomain,
-                    result.numericCategoryDomain,
-                );
-            }
         } else {
             this._expandedYDomain = null;
-            this._expandedCategoryDomain = null;
         }
 
         this._rowPaths = result.rowPaths;
@@ -320,7 +316,6 @@ export class CandlestickChart extends CategoricalYChart {
 
     override resetExpandedDomain(): void {
         this._expandedYDomain = null;
-        this._expandedCategoryDomain = null;
     }
 
     protected destroyInternal(): void {

package/src/ts/charts/cartesian/cartesian-render.ts

@@ -204,7 +204,11 @@ export function renderCartesianFrame(
         });
     }
 
-    renderCartesianChromeOverlay(chart);
+    // Defer the chrome (axes/legend/tooltip) draw past the GPU fence so
+    // the chrome canvas doesn't present ahead of the GL glyphs on resize.
+    // `renderCartesianChromeOverlay` reads the `_last*` frame state set
+    // above, which stays stable until the next `_fullRender`.
+    chart._defer2D(() => renderCartesianChromeOverlay(chart));
 }
 
 interface RenderFrameCtx {
@@ -406,26 +410,25 @@ function renderSinglePlotFrame(
 
     const isMap = chart._renderMode === "map";
 
-    if (chart._gridlineCanvas && !isMap) {
-        // One-shot destructive prep (resizes + clears + scales to DPR).
-        // `renderGridlines` itself is non-destructive.
-        const dpr = glManager.dpr;
-        initCanvas(chart._gridlineCanvas, layout, dpr);
-        renderGridlines(
-            chart._gridlineCanvas,
-            layout,
-            xTicks,
-            yTicks,
-            theme,
-            dpr,
-        );
-    } else if (chart._gridlineCanvas && isMap) {
+    // Defer the gridline draw past the GPU fence (see `_defer2D`) so the
+    // gridline canvas doesn't present ahead of the GL glyphs on resize.
+    // The closure captures this frame's `layout` / ticks / `theme`.
+    const dpr = glManager.dpr;
+    const gridlineCanvas = chart._gridlineCanvas;
+    if (gridlineCanvas && !isMap) {
+        chart._defer2D(() => {
+            // One-shot destructive prep (resizes + clears + scales to
+            // DPR). `renderGridlines` itself is non-destructive.
+            initCanvas(gridlineCanvas, layout, dpr);
+            renderGridlines(gridlineCanvas, layout, xTicks, yTicks, theme, dpr);
+        });
+    } else if (gridlineCanvas && isMap) {
         // Map mode draws no cartesian gridlines, but the gridline
         // canvas may carry stale ink from a prior cartesian chart
         // type. Reset it to a clean transparent surface so the
         // basemap (rendered into the GL canvas below) reads as the
         // only background layer.
-        initCanvas(chart._gridlineCanvas, layout, glManager.dpr);
+        chart._defer2D(() => initCanvas(gridlineCanvas, layout, dpr));
     }
 
     renderInPlotFrame(gl, layout, glManager.dpr, () => {
@@ -571,10 +574,17 @@ function renderFacetedFrame(
     // One-shot destructive prep for the gridline + WebGL canvases.
     // Both phases below are per-facet; calling their destructive
     // helpers (initCanvas / renderInPlotFrame) in the loop would wipe
-    // every previously-drawn facet, leaving only the last cell
-    // visible.
-    if (chart._gridlineCanvas && sampleLayout) {
-        initCanvas(chart._gridlineCanvas, sampleLayout, glManager.dpr);
+    // every previously-drawn facet, leaving only the last cell visible.
+    //
+    // The gridline draws are deferred past the GPU fence (see
+    // `_defer2D`) so the gridline canvas doesn't present ahead of the GL
+    // glyphs on resize. `initCanvas` is deferred first so it runs before
+    // the per-facet `renderGridlines` closures below (FIFO flush order);
+    // the GL prep (`clearAndSetupFrame`) and draws stay in this pass.
+    const dpr = glManager.dpr;
+    const gridlineCanvas = chart._gridlineCanvas;
+    if (gridlineCanvas && sampleLayout) {
+        chart._defer2D(() => initCanvas(gridlineCanvas, sampleLayout, dpr));
     }
 
     clearAndSetupFrame(gl);
@@ -609,49 +619,56 @@ function renderFacetedFrame(
         // basemap layer is rendered into the GL canvas inside the
         // facet's scissor below.
         const isMap = chart._renderMode === "map";
-        if (chart._gridlineCanvas && !isMap) {
-            const localXTicks = independent
-                ? computeTicks(
-                      buildXDomain(
-                          chart,
-                          facetDomain.xMin,
-                          facetDomain.xMax,
-                          xIsDate,
-                      ),
-                      buildYDomain(
-                          chart,
-                          facetDomain.yMin,
-                          facetDomain.yMax,
-                          yIsDate,
-                      ),
-                      cell.layout,
-                  ).xTicks
-                : xTicks;
-            const localYTicks = independent
-                ? computeTicks(
-                      buildXDomain(
-                          chart,
-                          facetDomain.xMin,
-                          facetDomain.xMax,
-                          xIsDate,
-                      ),
-                      buildYDomain(
-                          chart,
-                          facetDomain.yMin,
-                          facetDomain.yMax,
-                          yIsDate,
-                      ),
-                      cell.layout,
-                  ).yTicks
-                : yTicks;
-            renderGridlines(
-                chart._gridlineCanvas,
-                cell.layout,
-                localXTicks,
-                localYTicks,
-                theme,
-                glManager.dpr,
-            );
+        if (gridlineCanvas && !isMap) {
+            // Deferred to the post-fence 2D flush. The closure captures
+            // this facet's `cell` (whose `cell.layout` already carries
+            // the padded domain from `buildProjectionMatrix` above) plus
+            // the frame-local domain/ticks, so it stays correct without
+            // recomputing at flush time.
+            chart._defer2D(() => {
+                const localXTicks = independent
+                    ? computeTicks(
+                          buildXDomain(
+                              chart,
+                              facetDomain.xMin,
+                              facetDomain.xMax,
+                              xIsDate,
+                          ),
+                          buildYDomain(
+                              chart,
+                              facetDomain.yMin,
+                              facetDomain.yMax,
+                              yIsDate,
+                          ),
+                          cell.layout,
+                      ).xTicks
+                    : xTicks;
+                const localYTicks = independent
+                    ? computeTicks(
+                          buildXDomain(
+                              chart,
+                              facetDomain.xMin,
+                              facetDomain.xMax,
+                              xIsDate,
+                          ),
+                          buildYDomain(
+                              chart,
+                              facetDomain.yMin,
+                              facetDomain.yMax,
+                              yIsDate,
+                          ),
+                          cell.layout,
+                      ).yTicks
+                    : yTicks;
+                renderGridlines(
+                    gridlineCanvas,
+                    cell.layout,
+                    localXTicks,
+                    localYTicks,
+                    theme,
+                    dpr,
+                );
+            });
         }
 
         withScissor(gl, cell.layout, glManager.dpr, () => {