adobe / adobe/react-spectrum

Virtualizer rounding of width causes a horizontal scrollbar

Open
#10,471 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

When the container width is fractional (e.g. 250.5), the Virtualizer rounds the width up, which causes a horizontal scrollbar to appear. This is similar to the Table issue #9448, but it also occurs with ListLayout (and likely all remaining layouts as well).

Image

### 🤔 Expected Behavior?

The width should be rounded down, so no horizontal scrollbar appears.

### 😯 Current Behavior

The width may be rounded up by as much as one pixel, causing a horizontal scrollbar.

### 💁 Possible Solution

_No response_

### 🔦 Context

For example, in a responsive layout with two lists each taking 50% of the page width, where both use a Virtualizer.

### 🖥️ Steps to Reproduce

https://stackblitz.com/edit/yyx9dlnx?file=src%2FExample.tsx

### Version

react-aria-components@1.20.0

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

macOS

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the StackBlitz reproduction in src/Example.tsx and compare the Virtualizer behavior with the related Table issue #9448. Trace how fractional container widths are handled for Virtualizer and ListLayout, then verify that widths such as 250.5 are rounded down without producing a horizontal scrollbar.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.