左侧用 transform: scaleX(ratio) 缩放，右侧用 left: -(1-ratio)×容器宽偏移并配合 overflow:hidden 遮罩，共用同一 ratio 值实现无重排同步变化，容器需设 position:relative。
position: absolute 时两个图层宽度怎么同步变化
滑块拖动时，左侧图层要实时缩放，右侧图层要露出对应部分——但不能靠 JS 反复改 width 百分比再重排版，那样卡顿明显。核心是让左侧图层用 transform: scaleX() 缩放，保持 layout 不触发重排，右侧图层用 clip-path 或纯 position 遮罩配合 overflow 隐藏，两者都基于同一个百分比值计算。
- 左侧图层设
position: absolute; top: 0; left: 0; width: 100%; height: 100%，缩放只用transform: scaleX(0.6)（比如滑到 60%） - 右侧图层同样
position: absolute; top: 0; left: 0; width: 100%; height: 100%，但不缩放，而是靠父容器overflow: hidden+ 自身left偏移来“露”出对应区域 - 避免用
width: calc(60%)动态设宽——CSS 计算在频繁拖动时仍会触发 layout，不如全交给 transform 和 offset
滑块拖拽过程中如何精准控制重叠边界
用户拖动滑块（<input type="range"> 或自定义 drag 元素），数值映射到视觉重叠位置，关键不是“左边占多少”，而是“分界线在哪儿”。这个分界线必须同时约束两个图层的可见区域，且不能有 1px 错位或闪烁。
- 把滑块值统一转为小数
ratio（0–1），左侧图层的缩放值 =ratio，右侧图层的left偏移 =- (1 - ratio) * 容器宽度 - 务必给容器设
position: relative，否则absolute子元素的定位基准会错乱 - 移动端要注意
touchmove里没做preventDefault()会导致页面跟着拖拽，出现意外滚动 - 别用
getBoundingClientRect().width实时读取容器宽——布局抖动风险高；改用offsetWidth或初始化时缓存
IE11 或旧 Safari 下 clip-path 不生效怎么办
clip-path: inset(0 0 0 Xpx) 看起来简洁，但 IE11 完全不支持，iOS
- 优先检测
CSS.supports('clip-path', 'inset(0)')，不支持就切到双层 offset 模式 - 右侧图层不用
clip-path时，设overflow: hidden在父容器，右侧图层自身用left: -Xpx平移，X = (1 - ratio) * 父宽 - 注意 Safari 旧版本对
transform: scaleX()的 subpixel 渲染 bug，可加will-change: transform或强制开启硬件加速（transform: scaleX(.9999)）缓解
为什么拖动松手后图片边缘偶尔有 1px 错位
这不是渲染误差，是浮点数计算累计导致的。比如滑块 value 是 63.27%，你用它算 scaleX(0.6327)，浏览器内部渲染时做了四舍五入，但两个图层分别计算，偏差方向可能相反。
立即学习“前端免费学习笔记（深入）”；
- 所有涉及像素级对齐的计算，最终结果必须
Math.round()到整数，尤其是偏移量：Math.round(ratio * container.offsetWidth) - 左侧图层缩放建议用
scaleX(ratio)，右侧图层平移用left: -Math.round((1 - ratio) * container.offsetWidth) + 'px' - 不要依赖 CSS 自动计算百分比对齐——它不保证跨图层像素级一致；宁可 JS 算死一个 px 值，传给两个图层
真正难的不是写出来，是让左右图层在任意缩放、任意 DPR、任意浏览器下，分界线都严丝合缝。多数人卡在浮点处理和 fallback 时机上，而不是定位本身。
