CSS链接边框与圆角问题：hover白边、Webkit过渡生效异常

问题1：hover时左右出现细小白色边框 #

原因 #

这个问题是亚像素渲染和盒模型覆盖范围不匹配共同导致的：

• 你给.cta--pill设置了0.03125rem（即0.5px）的边框，同时父元素背景色为白色
• 伪元素::before的定位是top:0;right:0;bottom:0;left:0，仅覆盖了父元素的padding+content区域，没有覆盖到边框范围
• 半像素边框的抗锯齿渲染会导致父元素边框和伪元素边缘之间出现微小缝隙，漏出父元素的白色背景，就表现为细小的白边

修复方案 #

修改::before的定位值，向外扩张等于边框宽度的距离，让伪元素完全覆盖父元素的边框区域：

.cta--pill::before {
  /* 原有属性保留 */
  top: -0.03125rem;
  right: -0.03125rem;
  bottom: -0.03125rem;
  left: -0.03125rem;
}

问题2：Webkit浏览器中::before的border-radius仅在过渡过程中生效 #

原因 #

这是Webkit内核的渲染优化bug：
当元素通过transform完全移出父元素overflow: hidden的可视区域时，Webkit会跳过对该元素非关键样式（比如border-radius）的预计算，以节省性能。直到元素开始进入父元素可视区域时，才会重新计算完整样式，所以看起来border-radius是在过渡动画执行过程中才生效的。

修复方案 #

可以任选一种方案触发浏览器完整渲染伪元素的所有属性：

1. 添加will-change属性，提前告知浏览器该元素会做变换动画，不要省略样式计算：

   .cta--pill::before {
     will-change: transform;
   }
   

2. 开启硬件加速，强制浏览器保留完整的样式渲染：

   .cta--pill::before {
     transform: translateX(-100%) translateZ(0);
   }
   

3. 初始状态下给伪元素留1px的区域在父元素可视范围内，避免被Webkit判定为完全不可见：

   .cta--pill::before {
     transform: translateX(calc(-100% + 1px));
   }
   

内容的提问来源于stack exchange，提问作者Mike Hermary