Skip to content

[bug]: MessageScroller registry item: data-autoscrolling:scrollbar-none strobes the scrollbar during streaming on classic-scrollbar platforms #11576

Description

@ahardin

Describe the bug

The registry-styled MessageScrollerViewport includes data-autoscrolling:scrollbar-none in its class list. The controller toggles the data-autoscrolling attribute around every programmatic scroll and clears it on a ~180ms timeout. While an assistant response streams with autoScroll, programmatic scrolls happen at chunk cadence — so whenever gaps between chunks exceed the timeout, the attribute flips off and back on repeatedly, and the viewport's scrollbar-width flips between thin and none with it.

On platforms with classic (non-overlay) scrollbars — Windows, most Linux desktops, macOS with "Show scroll bars: Always" — the scrollbar visibly strobes in and out for the whole duration of the response. Without scrollbar-gutter: stable the content also reflows by the scrollbar's width on every flip.

On macOS default overlay scrollbars the artifact is invisible (no persistent thumb), which may be why it hasn't been reported.

Suggested fix: either drop data-autoscrolling:scrollbar-none from the registry item, or hold the attribute stable for the whole streaming turn instead of toggling it per programmatic scroll on a short timeout. We resolved it locally by removing the utility from the vendored wrapper.

Affected component/components

MessageScroller (registry item message-scroller.tsx; attribute behavior in @shadcn/react 0.3.0)

How to reproduce

  1. Use a platform/browser that renders classic scrollbars (e.g. Linux or Windows Chrome, or macOS with scroll bars set to "Always").
  2. Install message-scroller from the registry and stream an assistant reply into it with autoScroll (any streaming source whose chunk gaps sometimes exceed ~180ms — real network LLM streams do).
  3. Watch the viewport scrollbar while the reply streams: it flashes in and out at chunk cadence.

Codesandbox/StackBlitz link

https://stackblitz.com/github/ahardin/message-scroller-stream-repro?file=src%2FApp.jsx

(Source: https://github.com/ahardin/message-scroller-stream-repro — deterministic fake stream, no LLM/network. The toolbar checkbox toggles the registry data-autoscrolling:scrollbar-none class; the on-page counters are the paint-accurate probe described above, so the defect is measurable even on overlay-scrollbar platforms.)

Logs

No response

System Info

@shadcn/react 0.3.0, Chromium on Arch Linux (classic scrollbars); reproducible on any classic-scrollbar platform

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions