Skip to content

fix(VisuallyHidden): Prevent unexpected scroll overflow issue by adding explicit position #3407

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed

Conversation

cham0287
Copy link

@cham0287 cham0287 commented Mar 7, 2025

Description

Fixes #3406

This PR addresses an issue where the VisuallyHidden component could trigger unwanted scrollbars when used within containers that have overflow-y-scroll applied. By adding explicit top: 0 and left: 0 positioning to the component, it properly constrains the element within its parent container boundaries.

Changes made:

Added top: 0 and left: 0 to the inline style properties of the VisuallyHidden component

@cham0287 cham0287 changed the title fix(VisuallyHidden): Prevent scroll overflow issue by adding explicit position fix(VisuallyHidden): Prevent unexpected scroll overflow issue by adding explicit position Mar 7, 2025
@ahaubenstock
Copy link

+1 just ran into this problem today as well with select inside a scrolling component

@chaance
Copy link
Member

chaance commented May 5, 2025

This is a known issue with the visually hidden pattern, and there are reasons to prefer keeping the node closer to its parent by default. If this resolves your issue I recommend wrapping VisuallyHidden in your codebase and adding the style props you need directly.

@chaance chaance closed this May 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

VisuallyHidden component causes unnecessary scroll in overflow containers
3 participants