VisuallyHidden component from the React Aria library breaks viewport position

[magraina]

Provide a general summary of the issue here

The VisuallyHidden component from react-aria, used as described by the documentation, breaks page styling at certain viewport dimensions. Namely, if the element that it's being used with is offscreen and needs to be scrolled to in order to be interacted with, doing so will break the height and flex flow of the parent container in some strange way.

When using components like checkbox, radio or switch, you are not aware about this issue.

🤔 Expected Behavior?

Using components like checkbox, radio or switch, which uses the VisuallyHidden component should have no effect on the rest of the page.

😯 Current Behavior

Interacting with a component that uses VisuallyHidden breaks the surrounding page layout when a child component of it get's focused but is offsceen

💁 Possible Solution

Components that make use of <VisuallyHidden /> should have a position: relative styling per default or <VisuallyHidden /> needs a wrapper that does that.

🔦 Context

Using the component as described by the documentation breaks my application's styling, something which took a good chunk of time to pinpoint. The VisuallyHidden component should only hide its children nodes and have no effect on the rest of the DOM.
This issue is known in #5094 but the solution is not clearly visible for users of the library.
The actual "fix" is just hidden soemwhere in the example CSS.

🖥️ Steps to Reproduce

1. Open this example.
2. Resize your browser window so that the checkboxes at the bottom of each column overflow off the bottom of the screen.
3. Scroll down to the bottom checkboxes. Click "Working Option 15" and observe that it behaves exactly as you'd expect.
4. Now click "Broken Option 15" and observe that it breaks the page layout by shifting everything upwards
5. Open the source code here. Observe that the Checkbox component - the one that does not break the styling - applies a display: none rule to the input element in order to hide it, rather than using the VisuallyHidden component from react-aria. Observe that the CheckboxWithVisuallyHidden component does use VisuallyHidden, and that interacting with that version of the checkbox breaks the page.

Version

1.13.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11 Pro 25H2 26200.8246

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[devongovett]

It says that in the documentation: https://react-aria.adobe.com/VisuallyHidden

VisuallyHidden is positioned absolutely, so it must have a position: relative or position: absolute ancestor. Otherwise, undesired scrollbars may appear.

[magraina]

It says that in the documentation: https://react-aria.adobe.com/VisuallyHidden

VisuallyHidden is positioned absolutely, so it must have a position: relative or position: absolute ancestor. Otherwise, undesired scrollbars may appear.

Sure but that's not the place you would go to when you want to use a checkbox component.
And it's not the case that everyone looks at the CSS code of a example. There's no indication anywhere that there are any special features one could glean from it.

[devongovett]

The CSS in the Checkbox example also mentions it:

/* This is needed so the HiddenInput is positioned correctly */
position: relative;

I'm not sure what else we could do. We can't set it automatically because that might break cases where a different position is required.

[magraina]

I mean it could be more obvious that there is a potential issue when using this component. Like a "note" block, that covers that.
Like it is on the VisuallyHidden page.

Important

The hidden input within the component is visually hidden and positioned absolutely, it must have a position: relative or position: absolute ancestor. Otherwise, undesired scrollbars or viewport shifts may appear. See CSS example for more details.

Why would I look into the CSS examples when I don't make use of them?
The new documentation doesn't even mention the details of the components anymore.
And in the referenced hook there is also no comment about that as well.

It took me hours to find out why the whole viewport is strangely shifting upwards in certain scenarios. In the worst cases I only had a blank page because the whole page was in the negative area above the viewport.