CSS径向渐变在Mac OS及Safari中引发闪烁与CPU占用飙升问题求助

问题背景 #

使用3个带有径向渐变和缩放变换的div实现网格渐变动画，在Chrome等浏览器表现正常，但Mac OS的Safari中出现闪烁、CPU占用飙升的问题，自动前缀处理无效。

核心原因 #

Safari对background-size/background-position这类背景属性的动画支持效率极低，结合transform的同时变换，会触发频繁的重排重绘，导致性能问题和视觉闪烁。而transform属性是GPU加速的，性能开销远低于背景属性动画。

解决方案 #

方案1：用transform替代背景属性动画（推荐）

将背景放在子元素中，完全通过transform的缩放、旋转、平移来模拟背景的位置和大小变化，避免操作背景属性。

修改后的代码示例：

/* 父容器：负责定位，裁剪超出内容 */
.mesh_gradient--color {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
}

/* 子元素：承载渐变，通过transform实现动画 */
.mesh_gradient--color__inner {
  width: 100%;
  height: 100%;
  transform: scale(2) rotate(0deg);
  background: radial-gradient(50% 50% at 50% 50%, #050302 0%, rgba(6, 3, 2, 0) 100%);
  background-repeat: no-repeat;
}

@keyframes brownian_motion {
  50% { 
    /* 用translate替代background-position的偏移，scale替代background-size的缩放 */
    transform: scale(2.5) rotate(-75deg) translate(-10%, -10%);
  }
}

@keyframes brownian_motion_2 {
  50% { 
    transform: scale(2.5) rotate(90deg);
  }
}

对应HTML需给每个.mesh_gradient--color添加子元素：

<div class="mesh_gradient--color">
  <div class="mesh_gradient--color__inner"></div>
</div>

方案2：强制触发GPU加速

通过添加will-change或translateZ(0)提示Safari使用硬件加速，减少重绘开销。修改原CSS：

.mesh_gradient--color {
  width: 100%;
  height:100%;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin: auto;
  background: radial-gradient(50% 50% at 50% 50%, #050302 0%, rgba(6, 3, 2, 0) 100%);
  background-repeat: no-repeat;
  /* 触发GPU加速 */
  will-change: transform, background-size, background-position;
  transform: translateZ(0) scale(2) rotate(0deg);
}

注意：will-change仅在需要动画的元素上使用，避免过度占用GPU资源。

方案3：简化渐变复杂度

简化径向渐变的语法，减少浏览器计算量：

/* 去掉默认的at 50% 50%，改用circle关键字简化 */
background: radial-gradient(circle, #050302 0%, rgba(6, 3, 2, 0) 100%);

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