Bug reportSep 23, 2026· 0:22· 0 views
Chakra UI v3: ScrollArea shows spurious vertical scrollbar on horizontal-only overflow
0:22 total
Comments · 0
Be the first to comment.
Bug report— by SceneRecap AI
mediumScrollArea Component / Ark UI Scroll Area recipe styles
os: macOSbrowser: Chromium 151.0.7922.34packages: @chakra-ui/react 3.37.0, @ark-ui/react 5.39.0, @zag-js/scroll-area 1.43.3, react 19.3.0
Repro steps
- 1.Render a Chakra UI ScrollArea component containing content wider than the viewport (overflowing on X axis) but shorter than the viewport height (no overflow on Y axis).
- 2.Hover over the ScrollArea container in the preview window.
Expected
Only the horizontal scrollbar should display on hover, and no vertical scrollbar or scroll thumb should appear when vertical content does not overflow.
Actual
A 20px vertical scrollbar thumb renders at the top right edge of the viewport on hover despite the content not exceeding the container height.
Evidence
visualAt 0.0s, the preview box initially displays without scrollbars; hovering over the container at 5.0s reveals both the horizontal scrollbar and an unwanted vertical scrollbar thumb at the top-right corner.
Issue markdown (copy-paste ready)
### Description In `@chakra-ui/react` v3.37.0 (using `@zag-js/scroll-area 1.43.3` / `@ark-ui/react 5.39.0`), rendering a `ScrollArea` with content that only overflows horizontally causes a small vertical scrollbar thumb (~20px) to appear in the top-right corner upon hovering. ### Steps to Reproduce 1. Open a Chakra UI v3 playground project with `@chakra-ui/react` 3.37.0 (0.0s). 2. Create a `ScrollArea` container with a fixed height (e.g., 12rem) and content with `w="40rem"` containing 3 lines of text so that only horizontal overflow occurs. 3. Hover over the `ScrollArea` container (5.0s). ### Expected Result Only the horizontal scrollbar should appear on hover when there is no vertical overflow. ### Actual Result A vertical scrollbar thumb is rendered at the top right edge along with the horizontal scrollbar. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →