css 径向渐变导致 safari 和 mac os 中 cpu 闪烁出现峰值

Question

我正在尝试在CSS中制作简单的网格渐变动画。它只有 3 个 div，具有径向渐变和比例变换。在任何其他浏览器中，一切都按预期运行。但在 Safari 中，由于某种原因出现闪烁和 cpu 峰值。

 .mesh_gradient--color {
   width: 100%;
   height:100%;
   position: absolute;
     display: flex;
   align-items: center;
   transform: scale(2) rotate(0deg);
   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;
 }
 
 @keyframes brownian_motion {
   50% { 
         background-size: 90% 90%;
         background-position: 120% 120%;
         transform: scale(2.5) rotate(-75deg);
   }
 }
 
 @keyframes brownian_motion_2 {
   50% { 
         background-size: 80% 80%;
         background-position: 0 0;
         transform: scale(2.5) rotate(90deg);
   }
 }
 

https://jsfiddle.net/jx98y32k/1/

这是 视频，在 Safari 中闪烁

这是我正在构建的网站的代码。我在 Safari 中测试它时发现了这个错误，在检查了每个代码后我发现了导致它的部分。我尝试过自动前缀，但没有成功。

P.S: 我以为这个问题只出现在 Safari 中，但普遍出现在 Mac OS 上

Answer 1

这是 Safari 中的一个错误，请参阅此错误报告。 Chrome 没有这个问题，尽管它也是基于 WebKit 的。