如何修复CSS平面渐变动画中的网格线条闪烁问题

问题根因 #

远处网格闪烁是透视场景下的常见渲染问题：远端网格线经过3D变换缩放后物理尺寸小于1像素，浏览器抗锯齿采样时出现随机跳变，你之前尝试的3D加速属性仅解决图层渲染冲突，无法修复采样逻辑导致的闪烁，因此无效。

可行解决方案 #

按以下步骤修改代码即可解决问题：

1. 给平面元素添加渲染优化属性
   给.top-plane和.bottom-plane选择器新增以下代码：

/* 修复小于1像素线条的采样跳变 */
filter: blur(0.4px) contrast(1.8);
/* 要求浏览器保留线条锐利度 */
image-rendering: crisp-edges;
/* 提前告知浏览器该元素需要动画优化 */
will-change: background-position, transform;
/* 补全非webkit前缀的标准属性避免兼容异常 */
transform-style: preserve-3d;

2. 调整背景定位初始偏移
   给两个平面的background相关属性新增1px以内的偏移，避免线条刚好卡在像素边界：

background-position: 0.5px 0.5px, 0.5px 0.5px;

3. 所有3D变换属性补全不带前缀的标准写法
   比如-webkit-transform: rotateY(85deg)补充为：

-webkit-transform: rotateY(85deg);
transform: rotateY(85deg);

修改后完整代码 #

CSS代码：

html {
  overflow: hidden;
}

.wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  margin: 0 auto;
  -webkit-perspective: 360px;
  perspective: 360px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.top-plane,
.bottom-plane {
  width: 180%;
  height: 400%;
  top: -150%;
  position: fixed;
  background-image: linear-gradient(#9b1ba1 3px, transparent 3px), linear-gradient(90deg, #9b1ba1 3px, transparent 3px);
  background-size: 100px 100px, 100px 100px;
  background-position: 0.5px 0.5px, 0.5px 0.5px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  filter: blur(0.4px) contrast(1.8);
  image-rendering: crisp-edges;
  will-change: background-position, transform;
}

.top-plane {
  left: -60%;
  -webkit-transform: rotateY(85deg);
  transform: rotateY(85deg);
  animation: planeMoveTop 2s infinite linear;
}

.bottom-plane {
  right: -60%;
  -webkit-transform: rotateY(-85deg);
  transform: rotateY(-85deg);
  animation: planeMoveBot 2s infinite linear;
}

@keyframes planeMoveTop {
  from {
    background-position: 0.5px 0.5px, 0.5px 0.5px;
  }
  to {
    background-position: 0.5px 0.5px, -99.5px 0.5px;
  }
}

@keyframes planeMoveBot {
  from {
    background-position: 0.5px 0.5px, 0.5px 0.5px;
  }
  to {
    background-position: 0.5px 0.5px, 100.5px 0.5px;
  }
}

@media (max-height: 350px) {
  .wrap {
    -webkit-perspective: 210px;
    perspective: 210px;
  }
}

HTML代码：

<body>
  <div class="wrap">
    <div class="top-plane"></div>
    <div class="bottom-plane"></div>
  </div>
</body>

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