LearnNewsExamplesServices
Frontmatter
id9396
titleE2E: Implement Synthetic Thumb Drag Profiles for Optical Pinning Validation
stateClosed
labels
aitestinggrid
assigneestobiu
createdAtMar 8, 2026, 6:48 PM
updatedAtMar 8, 2026, 6:55 PM
githubUrlhttps://github.com/neomjs/neo/issues/9396
authortobiu
commentsCount1
parentIssue9380
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtMar 8, 2026, 6:49 PM

E2E: Implement Synthetic Thumb Drag Profiles for Optical Pinning Validation

Closed v12.1.0 aitestinggrid
tobiu
tobiu commented on Mar 8, 2026, 6:48 PM

This ticket documents the enhancement of both GridRowPinning.spec.mjs (BigData) and GridThumbDragDevIndex.spec.mjs (DevIndex) to include synthetic scrollbar thumb drag simulations.

The Enhancements: Since Playwright cannot natively grab and drag an OS-level overflow: auto scrollbar thumb, we implemented synthetic drag profiles (Steady Slow Drag, Ping-Pong Drag, Massive Snap Drag) by:

  1. Dispatching a native mousedown event on the custom .neo-grid-vertical-scrollbar node to trigger the addon's isThumbDragging state.
  2. Artificially mutating wrapper.scrollTop in rapid loops to bypass native momentum physics and instantly test the addon's synchronous CSS variable injection.
  3. Dispatching a global mouseup to release the state.

Empirical Findings from Playwright Telemetry:

  • Jitter is Cured: The synchronous CSS Variable injection provides perfectly smooth optical panning during the active drag phase.
  • The White Flash persists on massive jumps: Despite the math being absolutely correct (the CSS variable perfectly offsets the rows into the new viewport), the massive snap drag (50,000px) reliably produces "White Flash" blank frames (105 in BigData, 141 in DevIndex).

Architectural Reality Check: The testing proves that optical CSS transforms cannot "rescue" pixels during a massive native scroll jump. When the browser's native scroll engine processes a massive scrollTop jump, it destroys the old GPU compositor tile and allocates a new empty tile. Even if we synchronously translate the DOM nodes into the new viewport in the exact same 16ms frame, the browser has already flushed the pixels and paints a white rectangle until the layout engine finishes a full repaint.

This confirms that with native overflow: auto scrollbars, preventing a white flash on a massive jump is physically impossible in an async worker environment without predictive rendering heuristics or abandoning the native scrollbar entirely.

tobiu added the ai label on Mar 8, 2026, 6:48 PM
tobiu added the testing label on Mar 8, 2026, 6:48 PM
tobiu added the grid label on Mar 8, 2026, 6:48 PM
tobiu added parent issue #9380 on Mar 8, 2026, 6:48 PM
tobiu referenced in commit e757474 - "Test: Implement Synthetic Thumb Drag Profiles for Optical Pinning Validation (#9396) on Mar 8, 2026, 6:49 PM
tobiu
tobiu Mar 8, 2026, 6:49 PM

The GridRowPinning.spec.mjs and GridThumbDragDevIndex.spec.mjs test files have been successfully updated, committed, and pushed.

Test Results (BigData / 100k rows):

  • Total Frames Measured: 17851
  • Total Blank Frames (White Flash): 105
  • Total Jitter Bounces Detected: 10

Test Results (DevIndex / OffscreenCanvas):

  • Total Frames Measured: 13253
  • Total Blank Frames (White Flash): 141
  • Total Jitter Bounces Detected: 10

Conclusion: The data has fundamentally shifted our understanding of browser rendering. The CSS variables mathematically worked, but the browser GPU compositor destroys off-screen textures during massive native scroll jumps faster than we can rescue them with CSS transforms. We must abandon optical pinning as a cure for the white flash.

tobiu assigned to @tobiu on Mar 8, 2026, 6:49 PM
tobiu closed this issue on Mar 8, 2026, 6:49 PM