React Aria Checkbox在特定CSS容器中出现异常空白问题

已在React Spectrum GitHub仓库提交Issue #7108。

当前遇到渲染异常：当容器设置max-width、margin-left: auto、margin-right: auto和overflow: hidden属性时，超出容器max-height范围的React Aria Checkbox组件仍会占用页面空间，导致容器渲染后出现额外空白。但使用React Aria TextField等其他组件时无此问题。

请问该异常的原因是什么？是否需要向React Aria维护者报告？目前已采用React Aria Hooks作为临时解决方案，复现代码已上传至仓库，本地启动说明见项目README。

容器CSS代码片段 #

.container {
  width: 100vw;
  max-width: 80vw;
  height: 100vh;
  max-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  background-color: lightsteelblue;
}

渲染对比 #

使用Checkbox时 #

![使用Checkbox时]

使用TextField时 #

![使用TextField时]

React组件实现代码片段 #

import { Checkbox, CheckboxGroup, Input, Label, TextField } from 'react-aria-components'
import './App.css'
import WorkaroundChecbox from './components/WorkaroundCheckbox'

export default function App({ type }: { type: 'normal' | 'anomaly' | 'workaround' }) {
  return (
    <div className="container">
      <div className="filler">Filler</div>
      <CheckboxGroup className="checkbox-group">
        {
          Array.from(Array(200).keys())
            .map((_, index) => (
              <>
              {type === 'normal' &&  (
                <TextField>
                  <Label>{index}</Label>
                  <Input />
                </TextField>
              )}
              {type === 'anomaly' &&  (
                  <Checkbox>{index}</Checkbox>
                )}
              {type === 'workaround' &&  (
                  <WorkaroundChecbox>{index}</WorkaroundChecbox>
                )}
              </>
            ))
          }
      </CheckboxGroup>
    </div>
  )
}

已定位根因：问题源于React Aria Checkbox中使用的VisuallyHidden包装组件（对应代码位置：React Spectrum仓库packages/react-aria-components/src/Checkbox.tsx#L242）。已在自定义Checkbox组件中添加该组件复现了此问题，目前等待维护者回复。

内容的提问来源于stack exchange，提问作者Varid Vaya