This R&D ticket explores the "Fixed Glass Overlay" strategy to completely cure the "White Flash" rendering artifact during massive manual scrollbar drags in async virtualization environments.
The Underlying Physics Problem:
Previous explorations (#9393, #9396) proved that mathematically correct CSS translateY transforms applied to the scroll content cannot prevent a white flash during massive scroll jumps (e.g., 50,000px). When the native scrollTop changes drastically, the browser's GPU compositor destroys the off-screen texture tile containing the stale rows. Even if we synchronously translate the rows back into the viewport, the browser paints a blank rectangle because the texture buffer was already flushed.
The "Fixed Glass Overlay" Hypothesis:
To defeat the browser's texture flushing, we must physically detach the rows from the scrolling context entirely during the drag.
- Intercept Drag: When
GridRowScrollPinning detects a scrollbar thumb mousedown, it applies a .neo-is-thumb-dragging class to the grid wrapper.
- Detach & Lock (CSS): The SCSS uses this class to force
.neo-grid-row to position: fixed !important.
- Coordinate Mapping: Because the rows are now fixed relative to the browser window, they instantly detach from the massive 2.5m pixel scrolling layer. They cannot be scrolled off-screen. We use CSS variables to lock their
top coordinate to exactly where they were physically resting when the drag started.
- The Drag: As the user drags the scrollbar wildly, the massive scroll layer flies up and down behind the rows, but the rows remain perfectly frozen "on the glass". The GPU compositor cannot flush them because they never move relative to the viewport.
- Heal: On
mouseup or when the App Worker sends the new VDOM, the class is removed. The rows revert to position: absolute and snap into their new, perfectly calculated layout slots within the scroll layer.
Implementation Goals:
- Update
Body.scss to define the fixed-position override state.
- Update
Row.mjs to embed its Y coordinate as a CSS variable (--row-initial-y).
- Update
GridRowScrollPinning to capture the wrapper's physical bounds on mousedown and manage the class toggling.
This R&D ticket explores the "Fixed Glass Overlay" strategy to completely cure the "White Flash" rendering artifact during massive manual scrollbar drags in async virtualization environments.
The Underlying Physics Problem: Previous explorations (
#9393,#9396) proved that mathematically correct CSStranslateYtransforms applied to the scroll content cannot prevent a white flash during massive scroll jumps (e.g., 50,000px). When the nativescrollTopchanges drastically, the browser's GPU compositor destroys the off-screen texture tile containing the stale rows. Even if we synchronously translate the rows back into the viewport, the browser paints a blank rectangle because the texture buffer was already flushed.The "Fixed Glass Overlay" Hypothesis: To defeat the browser's texture flushing, we must physically detach the rows from the scrolling context entirely during the drag.
GridRowScrollPinningdetects a scrollbar thumbmousedown, it applies a.neo-is-thumb-draggingclass to the grid wrapper..neo-grid-rowtoposition: fixed !important.topcoordinate to exactly where they were physically resting when the drag started.mouseupor when the App Worker sends the new VDOM, the class is removed. The rows revert toposition: absoluteand snap into their new, perfectly calculated layout slots within the scroll layer.Implementation Goals:
Body.scssto define the fixed-position override state.Row.mjsto embed itsYcoordinate as a CSS variable (--row-initial-y).GridRowScrollPinningto capture the wrapper's physical bounds on mousedown and manage the class toggling.