Chrome更新后box-shadow扩散大于1em时变为圆角矩形问题求助

Chrome 版本更新后，此前正常运行的波纹动画效果出现异常：当box-shadow的扩散半径大于1em时，阴影不再保持正圆形，变为圆角矩形，暂未查询到对应官方说明文档。

该问题是 Chrome 118 及以上版本引入的渲染回归bug：
当元素本身尺寸较小（示例中为1em*1em）、设置border-radius: 50%，同时搭配大扩散半径、0模糊半径的多层box-shadow时，渲染引擎的硬件加速路径没有按照阴影扩散半径等比例放大圆角值，而是直接复用了元素本身的基础圆角曲率（示例中元素基础圆角为0.5em），导致阴影外边缘的圆角曲率不足，视觉上呈现为圆角矩形而非正圆形。

HTML 代码 #

<html>
<head>
    <body style="background-color:#ddd">
        <div class="screen">
        <div class="sense-aroma"></div>
        </div>
    </body>
    </head>
</html>

CSS 代码 #

.screen {
  width: 320px;
  height: 550px;
  position: relative;
  background-color: #242739;
  margin: 0px auto;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.4);
}

.sense-aroma {
  background-color: rgba(228, 36, 195, 0.6);
  box-shadow: 0px 0px 21px 0px #E424C3;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  animation: ripple 1s linear infinite;
  position: absolute;
  top: 50%;
  margin: 0px auto;
  left: 0;
  right: 0;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(228, 36, 195, 0.2), 0 0 0 1em rgba(228, 36, 195, 0.2), 0 0 0 4em rgba(228, 36, 195, 0.2), 0 0 0 6em rgba(228, 36, 195, 0.2);
  }
  100% {
    box-shadow: 0 0 0 1em rgba(228, 36, 195, 0.2), 0 0 0 4em rgba(228, 36, 195, 0.2), 0 0 0 6em rgba(228, 36, 195, 0.2), 0 0 0 9em rgba(228, 36, 195, 0);
  }
}

• 方案1：添加极小模糊半径绕过异常渲染分支
  将所有box-shadow属性的模糊半径从0改为0.1px，无视觉感知差异，即可触发引擎正确的圆角缩放计算逻辑，修复后阴影可保持正圆形。修改后动画关键帧示例：

  @keyframes ripple {
    0% {
      box-shadow: 0 0 0.1px 0 rgba(228, 36, 195, 0.2), 0 0 0.1px 1em rgba(228, 36, 195, 0.2), 0 0 0.1px 4em rgba(228, 36, 195, 0.2), 0 0 0.1px 6em rgba(228, 36, 195, 0.2);
    }
    100% {
      box-shadow: 0 0 0.1px 1em rgba(228, 36, 195, 0.2), 0 0 0.1px 4em rgba(228, 36, 195, 0.2), 0 0 0.1px 6em rgba(228, 36, 195, 0.2), 0 0 0.1px 9em rgba(228, 36, 195, 0);
    }
  }
  

• 方案2：放大元素基础尺寸
  将.sense-aroma的宽高从1em调整为更大值（如4em），同步等比例缩小所有阴影扩散半径的数值，保留border-radius: 50%设置，可避免元素基础圆角过小触发的计算异常。
• 方案3：替换实现方案
  放弃大扩散半径box-shadow的实现方式，改用多层圆形元素配合transform: scale()+透明度动画实现波纹效果，该方案性能更优，也不会触发该渲染bug。

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