Bug report

Current Behavior

When using the VisuallyHidden component inside containers with overflow: hidden or overflow-y: scroll, the component extends beyond its parent container boundaries, causing unwanted scrollbars to appear or content to overflow. This creates unexpected scrolling behavior in parent components.

Expected behavior

The VisuallyHidden component should remain within its parent container boundaries and not trigger any scrolling behavior in parent components, while still maintaining its accessibility functionality.

Reproducible example

CodeSandbox Example

import { VisuallyHidden } from "@radix-ui/react-visually-hidden";

export default function App() {
  return (
    <div
      style={{ height: "200px", overflow: "scroll", border: "1px solid red" }}
    >
      {Array.from({ length: 200 }, (_, index) => (
        <p key={index}>test</p>
      ))}
      <VisuallyHidden />
    </div>
  );
}

Suggested solution

The issue can likely be fixed by adding explicit positioning (top: 0 and left: 0) to the VisuallyHidden component's inline styles. This would properly constrain the element within its parent container.

<span
  style={{
    position: 'absolute',
    border: 0,
    width: 1,
    height: 1,
    padding: 0,
    margin: -1,
    overflow: 'hidden',
    clip: 'rect(0, 0, 0, 0)',
    whiteSpace: 'nowrap',
    wordWrap: 'normal',
    top: 0, // Add this
    left: 0, // Add this
  }}
>
  {children}
</span>

Additional context

I initially discovered this issue when using the Form component and noticed unexpected scrollbars. After investigating further through Select component, I traced the problem back to the VisuallyHidden component.
This suggests that the issue may affect all components that use VisuallyHidden internally, including Form, Select, and others.

To debug the issue, I modified the VisuallyHidden component by removing the clip rect, adding background color, and increasing its width and height. This revealed that the component was positioning itself at the bottom of the container without respecting the height limitations of the overflow container, which is what triggered the unwanted scrollbars. Adding explicit top: 0 and left: 0 positioning properties constrains the element properly within its parent boundaries.

Your environment