Release — suppress mobile scroll jump-back on message realign (#5338)

[nesquena-hermes]

Release — suppress mobile scroll jump-back on message realign (#5338)

PR #5338 by @allenliang2022. On mobile, realigning the viewport after loading older messages caused a visible scroll jump-back: the app's scrollTop write and the browser's own overflow-anchor machinery both compensated in the same frame.

Fix (static/ui.js)

• _suppressBrowserOverflowAnchor(container) sets overflow-anchor:none only when the browser layer is actually active (getComputedStyle().overflowAnchor === 'auto', i.e. mobile), releasing on the next requestAnimationFrame and restoring the prior inline value only if still owned.
• Desktop (resting none) is a no-op — helper returns null, nothing changes.
• Both this and _fixMobileScrollJank() route through one shared predicate _browserOverflowAnchorActive so the guards can't drift.

Gate

• Codex: SAFE TO SHIP — desktop unchanged, mobile restores inline state on rAF (no permanent none leak), _programmaticScroll timing intact, no interaction bug with the bug: WebUI is unusable on Android - transcript jumps to top on every interaction (regression in v0.51.576) #4856 android fix.
• Full suite: 11466 passed (only the 2 pre-existing test_scheduled_jobs_profile_isolation serial artifacts); 29 targeted scroll/anchor tests + 187 in the Codex focused run.

Credit: @allenliang2022.

[greptile-apps]

Greptile Summary

This release PR ports #5338 into master, fixing a mobile-only scroll jump-back caused by the browser's overflow-anchor machinery and the app's own scrollTop write both compensating for above-viewport height changes in the same frame. It also closes the second vector where the deferred postProcessRenderedMessages rAF (which runs syntax highlighting, katex/mermaid, and media embeds) was unguarded and could trigger a second browser re-anchor after the synchronous fix had already released.

• Adds _browserOverflowAnchorActive(el) as a shared predicate (computed-style, not matchMedia) and _suppressBrowserOverflowAnchor(container) that holds overflow-anchor:none only when the browser layer is genuinely active, then restores the prior inline value via a deferred rAF with ownership tracking to prevent double-restore races.
• Wraps all three requestAnimationFrame(()=>postProcessRenderedMessages(...)) dispatch sites with _postProcessWithAnchorSuppression, which holds suppression across the post-process frame and one extra rAF to cover async image-decode/katex/mermaid layout reflow; desktop (resting computed none) is a verified no-op throughout.
• Updates nine test files to assert on the new wrapper call-site, and adds a dedicated regression test test_post_process_runs_under_overflow_anchor_suppression covering the async settle window.

Confidence Score: 4/5

Safe to merge — desktop is a verified no-op, the ownership-guarded restore correctly handles concurrent suppression calls, and all three post-render dispatch sites are now wrapped.

The core fix is well-scoped and the two-frame suppression window in _postProcessWithAnchorSuppression is intentional (one extra rAF from the wrapper, then _suppressBrowserOverflowAnchor's own rAF for the actual restore). The only finding is a cosmetic comment wrap in _restoreMessageViewportAnchor.

static/ui.js — the new suppression helpers and the _postProcessWithAnchorSuppression wrapper; otherwise all test files look correct.

Important Files Changed

Filename	Overview
static/ui.js	Adds _browserOverflowAnchorActive, _suppressBrowserOverflowAnchor, and _postProcessWithAnchorSuppression; updates _fixMobileScrollJank guard and wraps all three post-render rAF dispatch sites. Logic is correct; one cosmetic long-line comment wrap in _restoreMessageViewportAnchor.
tests/test_issue4856_android_scroll_regression.py	Adds test_post_process_runs_under_overflow_anchor_suppression covering the async settle window; assertions are well-scoped and verify all three dispatch sites via count >= 3.
tests/test_csv_table_rendering.py	Updated brittle literal match to assert on the new _postProcessWithAnchorSuppression wrapper and verifies postProcessRenderedMessages is still called inside it.
tests/test_pdf_html_preview.py	Updates count assertion from old literal (==2) to new wrapper form; adds chain check for the wrapper body.
tests/test_anchor_fallback_ownership.py	Adds _postProcessWithAnchorSuppression stub to the harness so the renderMessages call under test doesn't throw on the new dispatch site.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant R as renderMessages()
    participant RVA as _restoreMessageViewportAnchor()
    participant SBA as _suppressBrowserOverflowAnchor()
    participant PPW as _postProcessWithAnchorSuppression()
    participant PPR as postProcessRenderedMessages()
    participant Browser as Browser Layout

    Note over R,Browser: Frame N — render + scroll-restore
    R->>RVA: call (preserveScroll)
    RVA->>SBA: _suppressBrowserOverflowAnchor(container)
    SBA-->>RVA: release_A fn (inline → 'none')
    RVA->>Browser: "container.scrollTop += delta"
    RVA->>SBA: release_A() [sync]
    SBA->>Browser: requestAnimationFrame(restore_A)
    R->>Browser: requestAnimationFrame(_postProcessWithAnchorSuppression)

    Note over R,Browser: Frame N+1 — post-process + suppress
    Browser->>SBA: "restore_A fires → inline = ''"
    Browser->>PPW: _postProcessWithAnchorSuppression(inner)
    PPW->>SBA: _suppressBrowserOverflowAnchor(scroller)
    SBA-->>PPW: release_B fn (inline → 'none')
    PPW->>PPR: postProcessRenderedMessages(container)
    PPR-->>PPW: (highlight, katex, mermaid, media)
    PPW->>Browser: requestAnimationFrame(release_B) [finally]

    Note over R,Browser: Frame N+2 — deferred release
    Browser->>SBA: release_B fires → schedules restore_B rAF

    Note over R,Browser: Frame N+3 — restore
    Browser->>SBA: "restore_B fires → inline = '' (restored)"

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
    participant R as renderMessages()
    participant RVA as _restoreMessageViewportAnchor()
    participant SBA as _suppressBrowserOverflowAnchor()
    participant PPW as _postProcessWithAnchorSuppression()
    participant PPR as postProcessRenderedMessages()
    participant Browser as Browser Layout

    Note over R,Browser: Frame N — render + scroll-restore
    R->>RVA: call (preserveScroll)
    RVA->>SBA: _suppressBrowserOverflowAnchor(container)
    SBA-->>RVA: release_A fn (inline → 'none')
    RVA->>Browser: "container.scrollTop += delta"
    RVA->>SBA: release_A() [sync]
    SBA->>Browser: requestAnimationFrame(restore_A)
    R->>Browser: requestAnimationFrame(_postProcessWithAnchorSuppression)

    Note over R,Browser: Frame N+1 — post-process + suppress
    Browser->>SBA: "restore_A fires → inline = ''"
    Browser->>PPW: _postProcessWithAnchorSuppression(inner)
    PPW->>SBA: _suppressBrowserOverflowAnchor(scroller)
    SBA-->>PPW: release_B fn (inline → 'none')
    PPW->>PPR: postProcessRenderedMessages(container)
    PPR-->>PPW: (highlight, katex, mermaid, media)
    PPW->>Browser: requestAnimationFrame(release_B) [finally]

    Note over R,Browser: Frame N+2 — deferred release
    Browser->>SBA: release_B fires → schedules restore_B rAF

    Note over R,Browser: Frame N+3 — restore
    Browser->>SBA: "restore_B fires → inline = '' (restored)"

Loading

_{Reviews (1): Last reviewed commit: "docs(changelog): suppress mobile overflo..." | Re-trigger Greptile}

[greptile-apps]

The inline comment on this line has an accidental mid-sentence line-break: "…the mobile jump-back). This is why the" dangles at the end of line 889, turning the sentence split across two comment lines. Consider pulling the trailing fragment onto the next line so the sentence reads cleanly.

Suggested change

	// stack and yank the reader to an unrelated turn (the mobile jump-back). This is why the
	// bug is mobile-only and never reproduces on a desktop (none) browser. Suppress
	// stack and yank the reader to an unrelated turn (the mobile jump-back).
	// This is why the bug is mobile-only and never reproduces on a desktop (none) browser. Suppress

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!