overflow:hidden搭配border-radius出现圆角白边伪影的可行解决方案问询

问题原因 #

该白色伪影是浏览器分层渲染机制导致：带transform属性的伪元素会被提升为单独的合成层，和父元素overflow:hidden的圆角裁切抗锯齿边缘无法完全贴合，漏出了父元素本身的白色背景。

可落地的解决方案 #

方案1：最低成本修复（不改动原有逻辑）

给伪元素增加1px外扩抵消边缘缝隙，仅需要修改伪元素的定位属性即可：

a.swipe.primary:after {
  /* 原有代码保持不变，仅修改四个定位值 */
  right: -1px;
  top: -1px;
  bottom: -1px;
  left: -1px;
}

伪元素扩大1px后，父元素的overflow:hidden裁切后会完全覆盖缝隙，不会影响原有动效，兼容所有主流浏览器。

注意：需确保按钮内的文字<span>添加position: relative; z-index: 10;，避免文字被伪元素覆盖

方案2：无分层风险的替代实现（最稳定）

直接用背景渐变实现斜向滑入动效，完全规避分层渲染的缝隙问题，不需要使用伪元素：

a.swipe {
  /* 原有代码去掉background-color，新增以下属性 */
  background: linear-gradient(12deg, #c12424 0%, #c12424 50%, #fff 50%, #fff 100%);
  background-size: 220% 100%;
  background-position: 100% 0;
  transition: background-position 0.3s ease;
}

a.swipe.primary:hover {
  background-position: 0 0;
}

该方案实现的动效和原有效果完全一致，不存在层级适配问题，兼容性更好。

方案3：渲染优化触发修复

如果需要保留原有伪元素逻辑，也可以给父元素添加渲染优化属性，触发浏览器对裁切逻辑的优化：

a.swipe {
  /* 原有代码不变，新增属性 */
  will-change: clip-path;
}

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