使用中心展开式导航hover下划线效果时为何菜单项下偶现小像素点瑕疵？如何修复？

产生原因 #

这是浏览器非整数坐标下的抗锯齿渲染偏差导致的，与代码逻辑本身无关：

• 当前动画逻辑通过同时修改伪元素的left、right属性从50%位置向0位置展开，动画过程中会产生大量非整数的坐标计算结果
• 浏览器渲染2px高度的纯色线条时，遇到半像素坐标偏移，会对线条边缘做半透明抗锯齿处理，偶尔会在线条最下边缘漏出1-2个未被完全覆盖的细碎彩色像素点
• 该渲染偏差在Chrome、Firefox的硬件加速渲染路径中均可复现，不属于逻辑错误

修复方案 #

• 替换动画驱动属性，从根源减少半像素渲染问题
  放弃同时修改left和right的动画逻辑，固定伪元素的左右位置，通过居中缩放宽度实现从中心展开的效果。这种渲染路径下，浏览器仅需调整固定位置元素的宽度，不会因边缘坐标偏移出现漏像素问题，修改后的代码如下：

  .navbar > li > a::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    margin: 0 auto;
    background: currentColor;
    transition: width .4s ease-out;
  }
  .navbar > li > a.active::after,
  .navbar > li > a:hover::after {
    width: 100%;
  }
  

• 增加边缘覆盖补偿
  无需修改动画逻辑，仅将伪元素的bottom值从0调整为-1px，让2px高的线条向下多覆盖1px区域，就算边缘出现抗锯齿的半透明像素，也会被额外的覆盖区域遮挡，不会进入可视范围。
• 触发独立GPU合成层
  给伪元素添加transform: translateZ(0)属性，让浏览器将线条元素提升为独立的GPU合成层直接渲染，跳过普通文档流的逐像素抗锯齿计算流程，从渲染路径上避免边缘漏像素问题。

内容的提问来源于stack exchange，提问作者Zoltan King