17370845950

导航下划线抖动主因是像素对齐失效与重排触发；应优先用 transform: scaleX 配合 transform-origin 实现GPU加速动画，其次确保 position: relative 和 box-sizing: border-box，再辅以 will-change 与字体抗锯齿优化。

导航 hover 下划线抖动，通常是因为下划线元素（比如伪元素 ::after）的宽度或位置在动画起始/结束时没有精确对齐，导致浏览器重排或像素四舍五入引发的视觉跳变。用 transition: width 配合 left 控制，确实可行，但关键不在“用了 transition”，而在于**起点、终点的数值必须可被像素整除且不触发 layout 变化**。

确保下划线容器有明确的 position: relative

被 hover 的导航项（如 a 或 li）必须设 position: relative，否则伪元素的 left 和 width 会相对于最近定位祖先计算，容易错位。

• 不加 position: relative → ::after 的 left: 0 可能从 body 左侧开始算，宽度也不匹配文字实际宽度
• 加上后，left: 0 和 width: 100% 才真正对应当前链接的内盒尺寸

用 transform 替代 width + left（更推荐）

直接过渡 width 和 left 容易因字体渲染、缩放、DPR 导致小数像素，引发抖动。更稳妥的方式是固定下划线宽度（如 width: 100%），只用 transform: scaleX(0) → scaleX(1)，配合 transform-origin: left center 控制伸展方向：

• scaleX 是合成属性，不触发重排，GPU 加速，动画更顺滑
• 无需手动算 left 值，避免因 padding/margin 计算偏差
• 示例：transition: transform 0.3s ease; + transform: scaleX(0); 初始态

如果坚持用 width + left，请做这两件事

若业务限制必须用 width/left（比如要实现从中间向两边展开），请确保：

• 初始状态设 width: 0; left: 50%;，动画中用 width: 100%; left: 0; —— 这样 left 不参与过渡，只靠 width 拉伸，减少变量干扰
• 给父元素（导航项）加 will-change: width;（仅 hover 时加），提示浏览器提前优化渲染层
• 避免在 font-size 或 padding 上用 rem/em 等相对单位做动态变化，防止布局浮动

检查字体抗锯齿与设备像素比

某些 macOS + Chrome 组合下，文字边缘模糊会导致下划线左右 1px 抖动。可尝试：

• 给导航文字加 -webkit-font-smoothing: antialiased;
• 下划线伪元素加 backface-visibility: hidden; 或 translateZ(0) 强制硬件加速
• 在 CSS 中显式设置 box-sizing: border-box;，避免 padding 影响 width 计算

基本上就这些。抖动不是 transition 写错了，而是尺寸锚点没锁死。优先用 transform，其次保 position 和 box-sizing，再辅以 will-change 和抗锯齿微调 —— 平滑感立马回来。