Chrome浏览器中CSS模糊盒子边框显示异常问题求助

原问题代码 #

CSS代码 #

body {
  font-family: sans-serif;
}
p {
  column-fill: balance;
  column-count: 2;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  filter: blur(5px);
  z-index: -1;
  animation: move 15s linear infinite;
}
.box2 {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.box2::before {
  content: " ";
  position: absolute;
  top: -0px;
  left: -0px;
  bottom: -0px;
  right: -0px;
  background-image: conic-gradient(
    from 36deg at 20% 80%,
    #a100ffff 0% 25%,
    #000000 25% 30%,
    #119cfdff 30% 50%
  );

  filter: blur(500px);
  z-index: -1;
  animation: move 15s linear infinite;
}
@keyframes move {
  from {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(540deg);
  }
}

HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <script src="src/index.js"></script>
    <link rel="stylesheet" type="text/css" href="src/styles.css" />
    <div>
      <div class="box">1<br />12</div>
      <div class="box2">1<br />12</div>
    </div>
  </body>
</html>

该效果在Firefox中显示正常（如图片左侧效果），但近期Chrome浏览器中出现奇怪的线框，此前无此问题。

问题原因 #

这是Chrome在处理大模糊值（500px）+ 旋转动画时的渲染bug，模糊滤镜与变换动画叠加后，元素边界计算出现异常，导致线框生成。

修复方案 #

方案1：调整模糊值与元素尺寸 #

降低模糊值的同时扩大伪元素范围，既保证视觉效果相近，又避免渲染异常：

.box2::before {
  content: " ";
  position: absolute;
  /* 扩大元素范围 */
  top: -200px;
  left: -200px;
  bottom: -200px;
  right: -200px;
  background-image: conic-gradient(
    from 36deg at 20% 80%,
    #a100ffff 0% 25%,
    #000000 25% 30%,
    #119cfdff 30% 50%
  );
  /* 降低模糊值 */
  filter: blur(300px);
  z-index: -1;
  animation: move 15s linear infinite;
}

方案2：强制Chrome重新计算渲染层 #

给.box2添加渲染层触发属性，修复线框问题：

.box2 {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* 二选一即可 */
  transform-style: preserve-3d;
  /* backface-visibility: hidden; */
}

方案3：替换动画实现方式 #

不旋转整个元素，改为直接调整渐变的起始角度，避免变换动画与模糊滤镜冲突：

@keyframes move {
  from {
    background-image: conic-gradient(
      from 36deg at 20% 80%,
      #a100ffff 0% 25%,
      #000000 25% 30%,
      #119cfdff 30% 50%
    );
  }
  to {
    background-image: conic-gradient(
      from 396deg at 20% 80%,
      #a100ffff 0% 25%,
      #000000 25% 30%,
      #119cfdff 30% 50%
    );
  }
}

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