先确认是否真抖动：用safari连真机→右键元素→“show rasterization borders”，若描边半透明且window.devicepixelratio为2或3，则是sub-pixel渲染假象，非真实重排抖动。
直接看 window.devicePixelRatio 值并打开“Show Rasterization Borders”——如果返回 2 或 3，且元素描边呈半透明，那不是抖动，是 sub-pixel 渲染已激活，后续所有“微调”都得围绕亚像素对齐做。
怎么确认是真抖动还是 sub-pixel 渲染假象
移动端 Retina 屏（如 iPhone 14 Pro、iPad Pro）下看到的“抖动”，90% 是浏览器对非整数逻辑像素做插值渲染的结果，不是布局反复重排。关键区分点：
- 用 Safari 开发者工具连真机 → Elements 面板 → 右键元素 → “Show Rasterization Borders”：出现半透明描边 = sub-pixel 渲染已触发；纯实线 = 真实像素对齐
- 在控制台执行
window.devicePixelRatio：若为2或3，但 CSS 中用了height: 20.5px、line-height: 1.4、top: 50%这类非整数值，抖动几乎必然来自插值漂移 - 把页面 zoom 到 200% 再看：真实重排抖动会随缩放加剧；sub-pixel 抖动在特定缩放级下反而消失或转移位置
浮动元素 hover/状态切换时抖动的排查重点
浮动盒子本身不抖，抖的是它和兄弟元素之间的交界线或文字 baseline —— 根源常被误判为 JS 或动画，实则出在盒模型突变：
- hover 时加了
border: 1px solid #000，但常态没设border：等于突然多出 2px 高度，浮动流重计算 → 抖 - 常态用
box-sizing: content-box，hover 改成border-box：width 计算逻辑突变，父容器宽度溢出 → 换行+抖 - 浮动父容器内有图片或文字，hover 子元素触发字体重绘（如
font-weight: bold），导致行高微变 → baseline 偏移 → 视觉“跳” - 验证方法：在 DevTools 的 Computed 面板里手动切换
:hover，盯住width、height、border-top-width、line-height这几项是否分毫不差
为什么加 overflow-x: hidden 到 body 没用还让抖更明显
因为移动端根滚动容器是 html 元素，不是 body。给 body 加 overflow-x: hidden 不仅无效，某些安卓 WebView 还会因此干扰合成层调度，放大 sub-pixel 渲染误差：
- 必须写
html { overflow-x: hidden; }，且放在 CSS 文件最顶部，避免被 Normalize.css 等 reset 覆盖 - 若页面存在未约束宽度的
input[type="number"]（iOS 自带微调按钮撑宽）、img缺max-width: 100%、绝对定位元素超出视口，都会导致 html 宽度 > viewport → 浏览器强制横向滚动 → 滚动+重绘叠加 → 抖感倍增 - 检查方式：在 DevTools 的 Elements 面板里选中
html，看右侧 box model 显示的 width 是否大于当前设备的 CSS 视口宽度（如 iPhone SE 是375px）
伪元素边框方案里最容易漏掉的三个硬性条件
用 ::after + transform: scaleY(0.5) 画物理像素边框，看似简单，漏掉任一条件都会让 1px 线“悬空”“偏移”或“拦截点击”：
- 父元素必须设
position: relative，否则::after的position: absolute会脱标到body，缩放后位置完全失控 -
transform-origin必须写成0 100%（左下角），不能只写bottom—— Safari 对关键词解析不稳定，尤其 iOS 15–16 - 必须加
pointer-events: none，否则安卓 WebView 会把伪元素当可点击层，遮挡下方按钮或链接
真正卡住人的从来不是“怎么写”，而是“写了之后有没有去 Computed 面板里逐项核对 border、padding、line-height 在不同 DPR 下的实际渲染值”。Retina 屏问题只在真机上暴露，开发机看不出，就容易以为修好了——其实只是没触发而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
