Tailwind 的 sr-only 类虽用于视觉隐藏，但其 position: absolute 会脱离文档流，若父容器未建立定位上下文，浏览器（尤其 Chrome）在聚焦时将强制滚动 ，破坏 overflow-hidden 布局。根本解法是为滚动容器显式添加 relative 定位，使绝对定位元素锚定于其内。
tailwind 的 `sr-only` 类虽用于视觉隐藏，但其 `position: absolute` 会脱离文档流，若父容器未建立定位上下文，浏览器（尤其 chrome）在聚焦时将强制滚动 `
`，破坏 `overflow-hidden` 布局。根本解法是为滚动容器显式添加 `relative` 定位，使绝对定位元素锚定于其内。在使用 Tailwind CSS 构建响应式表单（尤其是含大量 sr-only 隐藏 <input> 的可访问性组件）时，一个隐蔽却高频的崩溃现象常被误判为“Chrome Bug”：当用户点击位于视口外的 <label></label> 触发焦点跳转时，整个页面突然横向/纵向偏移、内容消失、overflow-hidden 失效——而问题根源，恰恰来自 sr-only 类本身。
? 问题本质：position: absolute 的锚点错位
sr-only 的标准实现（包括 Tailwind v3.4+ 内置类）包含：
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}关键在于 position: absolute —— 它会让隐藏的 <input> 脱离正常文档流，并向上寻找最近的「已定位祖先」（即 position: relative/absolute/fixed/sticky）作为定位参考系。若找不到，则默认锚定到 根元素。
在你的典型布局中：
<body class="overflow-hidden h-screen w-screen flex flex-col">
<header>...</header>
<main class="flex-1 overflow-auto p-4 bg-gray-100"> <!-- ❌ 无定位！ -->
<div class="max-w-2xl mx-auto">
<label>
<input type="radio" class="sr-only"> <!-- 锚点 → html！ -->
<span>选项</span>
</label>
</div>
</main>
</body>由于 <main></main> 缺少 position: relative，所有 sr-only 元素均以 为锚点固定在全局坐标系中。当用户滚动 <main></main> 后点击底部 <label></label>，浏览器尝试将对应 <input> 滚入视口——但它无法随 <main></main> 滚动（因锚点在根），于是强制触发 滚动，直接冲破 overflow-hidden 防线，导致布局坍塌。
✅ 验证方法：在 Chrome DevTools 中选中任意
sr-only<input>，查看 Computed →position: absolute→offsetParent。若显示#document或，即确认锚点错误。
✅ 正确修复：为滚动容器添加 relative
只需为 <main></main>（或任何直接包裹 sr-only 元素的滚动父容器）添加 relative 定位，即可让 sr-only 元素锚定于其内部，随滚动同步位移：
<!-- ✅ 正确：main 显式设为 relative --> <main class="flex-1 overflow-auto p-4 bg-gray-100 relative"> <!-- sr-only input 现在锚定于 main，滚动时一同移动 --> </main>
对应 Tailwind 写法：
<main class="flex-1 overflow-auto p-4 bg-gray-100 relative">
<div class="max-w-2xl mx-auto">
<label class="inline-flex items-center cursor-pointer">
<input type="radio" class="sr-only" name="rating" value="5">
<span class="px-4 py-2 bg-white rounded border">Exceptional!</span>
</label>
</div>
</main>⚠️ 关键注意事项
-
不要移除
position: absolute：它是sr-only可访问性的核心（确保屏幕阅读器可读，同时视觉完全隐藏）。删除它将破坏无障碍支持。 -
避免在
上滥用overflow-hidden：如非模态弹窗场景，优先用fixed + inset-0 + overflow-hidden封装局部区域，而非全局锁死。 -
移动端额外加固：iOS Safari 对
overflow行为更敏感，建议为<main></main>同时添加：<main class="flex-1 overflow-auto p-4 bg-gray-100 relative max-h-[calc(100vh-4rem)]"> <!-- 显式高度约束 --> -
测试聚焦行为：在 Chrome 中打开 DevTools → Console，执行
document.querySelector('.sr-only').focus()，观察是否触发布局偏移。修复后应仅触发<main></main>内部滚动。
? 进阶：自动化修复（Svelte/React 场景）
若项目中大量使用 sr-only，可在组件库层面统一加固：
<!-- Svelte 示例：SafeScrollContainer.svelte -->
<div class="relative overflow-auto" {...$$props}>
<slot />
</div>// React 示例：SafeScrollContainer.tsx
interface SafeScrollContainerProps extends React.HTMLAttributes<HTMLDivElement> {}
export const SafeScrollContainer = ({ children, ...props }: SafeScrollContainerProps) => (
<div className="relative overflow-auto" {...props}>
{children}
</div>
);然后全局替换：
<!-- 替换前 --> <main class="overflow-auto">...</main> <!-- 替换后 --> <MainContainer class="h-[calc(100vh-4rem)]">...</MainContainer>
? 总结
sr-only 引发的滚动崩溃，本质是 CSS 定位上下文缺失导致的锚点漂移，而非 Tailwind 或 Chrome 的缺陷。最简、最安全、最符合规范的解法，就是为滚动容器显式添加 relative。这一行代码成本极低，却能彻底规避 overflow-hidden 失效、布局跳跃、可访问性降级等连锁问题——在构建高保真、高可用的现代 Web 应用时，这是必须写入团队 CSS 规范的黄金实践。
