LearnNewsExamplesServices
Frontmatter
id9393
titleE2E: Implement GridRowScrollPinning via CSS Variables
stateClosed
labels
enhancementaiarchitecturegrid
assigneestobiu
createdAtMar 8, 2026, 5:22 PM
updatedAtMar 8, 2026, 5:24 PM
githubUrlhttps://github.com/neomjs/neo/issues/9393
authortobiu
commentsCount1
parentIssue9380
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtMar 8, 2026, 5:24 PM

E2E: Implement GridRowScrollPinning via CSS Variables

Closed v12.1.0 enhancementaiarchitecturegrid
tobiu
tobiu commented on Mar 8, 2026, 5:22 PM

This ticket tracks the implementation of the CSS Variables strategy for Optical Row Pinning, designed to perfectly satisfy the two core goals:

  1. Leave wheel based scrolling alone.
  2. Ensure rows are visible on massive thumb drags (heal on scroll end).

The Implementation:

  1. CSS Variables (Neo.grid.Row): Injected var(--grid-row-pin-offset, 0px) into the base translate3d template string for all rows. This allows bulk optical shifting of the entire row pool via the browser's hardware-accelerated CSS engine, without requiring structural DOM changes or VDOM interception.
  2. Synchronous Engine (GridRowScrollPinning): The addon now listens to the native scroll event and synchronously calculates the deltaY against the worker's baseline.
  3. Absolute Threshold: A high absolute threshold (e.g., 500px) is used to ensure the addon completely ignores normal wheel scrolling, allowing native physics to govern small movements perfectly. It only engages to "freeze" the stale rows on the screen during massive scrollbar thumb drags, preventing the white flash.
  4. Healing: The VDOM onDeltaUpdate event synchronously clears the CSS variable (0px) when the worker finally catches up, snapping the fresh data into place.
tobiu added the enhancement label on Mar 8, 2026, 5:22 PM
tobiu added the ai label on Mar 8, 2026, 5:22 PM
tobiu added the architecture label on Mar 8, 2026, 5:22 PM
tobiu added the grid label on Mar 8, 2026, 5:22 PM
tobiu added parent issue #9380 on Mar 8, 2026, 5:23 PM
tobiu referenced in commit f23b49a - "Enhancement: Implement GridRowScrollPinning via CSS Variables (#9393) on Mar 8, 2026, 5:23 PM
tobiu assigned to @tobiu on Mar 8, 2026, 5:24 PM
tobiu
tobiu Mar 8, 2026, 5:24 PM

Input from Gemini 3.1 Pro:

✦ The CSS Variables architecture with the absolute 500px threshold has been committed and pushed to the repository.

This marks a major pivot in the Epic strategy:

  • We acknowledge that perfect pixel-sync between native scroll and async workers is impossible without breaking UX or generating extreme jitter.
  • The 500px absolute threshold guarantees that the addon never triggers during normal or even fast wheel scrolling. Wheel physics remain 100% native and smooth.
  • The addon now functions exclusively as an "emergency net" for massive scrollbar thumb drags, mathematically freezing the stale rows on the screen to prevent users from staring at an empty void for 50-100ms.
  • It automatically heals (clears the CSS variable) when the VDOM update arrives.

Closing this sub-ticket to set our new baseline. We can now proceed to testing the DevIndex grid.

tobiu closed this issue on Mar 8, 2026, 5:24 PM