<p>.form-switch 缩放错位是因 translateX(24px) 像素值不随缩放变化，导致滑块脱轨；修复需改用 calc(2rem - 0.75rem) 等相对单位，并确保 rem 基准响应缩放。</p>
缩放后 .form-check-input[type="checkbox"] 的滑块“飘走”了
根本不是滑块本身错位，而是 Bootstrap 5 默认用 transform: translate() 模拟滑块位移，而浏览器缩放会改变视口逻辑尺寸，但 transform 的像素偏移值（如 translateX(24px)）不会自动缩放——结果就是视觉上滑块卡在旧位置，和背景轨道明显脱节。
为什么 .form-switch 缩放错位比普通 checkbox 更明显
因为 .form-switch 的轨道（track）是用伪元素 ::before 和 ::after 绘制的，宽度/高度固定为 2rem 和 1.25rem，而滑块（thumb）靠 transform: translateX() 在轨道内移动。缩放时：
– 轨道尺寸按比例缩放（视觉变小）
– 滑块的 translateX(24px) 值不变（仍横移 24 像素）
→ 滑块超出轨道右端，或停在轨道中间不动
- 检查 computed styles：选中开关，看
transform值是否还是translateX(24px)，缩放后它没变就确认是这个问题 - 别试图改
left或margin-left：Bootstrap 用 transform 实现动画，硬设 left 会被覆盖 - 移动端双指缩放、PC 端 Ctrl+鼠标滚轮、Chrome 地址栏点击「缩放」按钮都会触发，不只限于系统 DPI 设置
不用 JS，纯 CSS 修复缩放偏移
核心是把固定像素的 translateX 改成相对单位，并确保轨道和滑块同步缩放。最稳做法是重写 .form-switch 的 transform 逻辑：
- 用
translateX(calc(2rem - 0.75rem))替代translateX(24px)，让位移随rem基准联动（前提是 :root font-size 已响应缩放） - 给
.form-switch .form-check-input加will-change: transform，提升缩放时重绘性能 - 如果用了自定义缩放变量（如
--bs-scale），直接用：transform: translateX(calc((2rem - 0.75rem) * var(--bs-scale, 1))) - 禁用默认 transition：加
transition: none避免缩放过程中出现滑块“抖动”
真正难搞的是嵌套在 transform: scale() 容器里的开关
比如整个卡片被 transform: scale(0.85) 缩小，里面再放 .form-switch——此时不仅滑块错位，点击区域也会偏移。Popper 类问题在这里也存在：getBoundingClientRect() 返回的坐标受外层 scale 影响，导致 input 的实际可点击热区和视觉位置不一致。
立即学习“前端免费学习笔记（深入）”；
- 临时诊断：控制台执行
document.querySelector('.form-switch input').getBoundingClientRect()，对比缩放前后width和x值是否成比例变化 - 根治办法：把外层
scale()移到卡片的父容器，让.form-switch所在 DOM 层级脱离变换影响 - 底线方案：放弃
transform: scale()，改用调整:root font-size+ rem 布局，这是唯一能保证所有 Bootstrap 控件（包括开关、tooltip、popover）缩放一致的方式
