直接改 width 会导致滑块卡顿甚至白屏，因高频 touchmove 触发强制重排；应改用 transform: scaleX(ratio) 或 translateX(calc(-100% + var(--pos))) 配合 overflow: hidden 和统一相对单位。
为什么直接改 width 会导致滑块卡顿甚至白屏
不是 JS 写错了，是浏览器在高频拖动中反复触发 layout：每次设 element.style.width = '65%'，浏览器就得重新计算整个布局树。移动端 touchmove 每秒可触发 60+ 次，等于每帧都强制重排——低端机直接掉帧、iOS Safari 甚至闪白屏。
- 用
transform: scaleX(ratio)替代width，硬件加速且不触发 layout - 左侧图层加
transform-origin: left，确保缩放锚点在左边缘 - 右侧图层用
transform: translateX(calc(-100% + 100% * ratio))，避免写死像素值 - 父容器必须设
overflow: hidden，否则平移后右侧图会溢出
input[type="range"] 怎么和 CSS 百分比宽度对齐
很多人把 input 放进容器就完事，结果 resize 后滑块位置错乱——根本原因是没统一计算基准。滑块值（0–100）必须映射为百分比，且所有相关尺寸都得用相对单位。
- 给
input设width: 100%，并包裹在position: relative的容器内 - 监听
input事件（不是change），实时更新 CSS 自定义属性：container.style.setProperty('--pos', `${e.target.value}%`) - 右侧图层用
clip-path: inset(0 calc(100% - var(--pos)) 0 0)，或 fallback 到transform: translateX(calc(-100% + var(--pos))) - 禁用默认样式：
appearance: none，再用::-webkit-slider-thumb自定义手柄
移动端 touchmove 为什么滑块不动或跳变
iOS Safari 默认会截断 touchmove 事件流来支持页面滚动，不阻止就会丢事件；同时未节流的连续更新又导致视觉跳变。
- 必须在
touchstart和touchmove中调用e.preventDefault() - 用
requestAnimationFrame节流更新，避免同步写样式：rafId && cancelAnimationFrame(rafId); rafId = requestAnimationFrame(updatePosition) - 计算坐标时减去容器偏移：
const x = e.touches[0].clientX - container.getBoundingClientRect().left - 限制范围：
const ratio = Math.max(0, Math.min(1, x / container.offsetWidth))
图片加载完成前滑块错位怎么办
图片异步加载，offsetWidth 或 getBoundingClientRect() 在 onload 前读取可能为 0，导致初始 --pos 计算失效，滑块卡在左上角。
立即学习“前端免费学习笔记（深入）”；
- 初始化时缓存容器尺寸：
const w = container.offsetWidth，后续只读这个值 - 监听图片
load事件，再执行一次updatePosition() - 给图片加
width: 100%; height: auto; display: block，防止加载中塌陷影响容器高度 - 避免用
clip-path: inset()动态值兼容老 Safari，优先用transform+overflow: hidden组合
最常被忽略的一点：所有 CSS 中的尺寸单位必须统一。混用 50% 和 200px，或在 transform 里写 translateX(200px) 而其他地方用百分比，resize 后分界线立刻偏移——这不是 bug，是单位失联。
