按钮Hover时CSS渐变背景闪烁问题求助

问题根源 #

Chrome在处理多背景层的background-size/background-position过渡+transform变换时，合成层渲染易出现异常，导致边缘闪烁或白线，这属于浏览器对渐变背景过渡的渲染优化bug。

快速修复方案：强制硬件加速 #

给渐变按钮添加硬件加速相关属性，强制浏览器为元素创建独立合成层，避免渲染错位：

.btn.btn-gradient {
  // 保留原有属性，新增以下配置
  backface-visibility: hidden;
  transform-style: preserve-3d;
  // 可选：提前告知浏览器元素即将变化的属性，优化渲染准备
  will-change: background-size, background-position, transform;
}

更稳定方案：改用伪元素实现渐变过渡 #

避免使用双重背景层切换逻辑，改用伪元素承载hover状态的渐变，通过过渡伪元素的opacity实现效果，渲染稳定性更强：

.btn.btn-gradient.has-btn-gradient-1 {
  color: #fff;
  background: linear-gradient(83.1deg, #c850c0 0%, #4158d0 100%);
  position: relative;
  z-index: 1;
  // 移除原有双重背景相关属性

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(83.1deg, #4158d0 0%, #c850c0 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
  }

  &:hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: 0px 0.8px 2px rgb(0 0 0 / 7%),
      0px 2.7px 6.7px rgb(0 0 0 / 10%), 0px 12px 20px rgb(0 0 0 / 28%);
    
    &::before {
      opacity: 1;
    }
  }
}

替代优化方案：调整背景过渡逻辑 #

若坚持使用双重背景，可将过渡属性改为background-position-x，降低浏览器计算压力：

.btn.btn-gradient.has-btn-gradient-1 {
  background: linear-gradient(83.1deg, #c850c0 0%, #4158d0 100%),
    linear-gradient(83.1deg, #4158d0 0%, #c850c0 100%);
  background-size: 100% 100%;
  background-position-x: 0%, -100%;
  background-repeat: no-repeat;

  &:hover {
    background-position-x: 100%, 0%;
    // 保留原有hover的transform、box-shadow属性
  }
}

三种方案均可解决Chrome中的闪烁/白线问题，其中伪元素方案的兼容性和稳定性最优。

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