在 Chrome 中重复线性渐变的渲染问题答案

【问题标题】：Rendering issue with repeating linear gradient in Chrome在 Chrome 中重复线性渐变的渲染问题
【发布时间】：2018-11-04 09:21:16
【问题描述】：

我遇到了一个重复线性渐变的错误，它影响了 Chrome 中的渲染质量。它们在 FireFox 中看起来很完美。

我的元素有 60 度的条纹。在 FireFox 中，条纹的边缘非常光滑，看起来很漂亮。但是，在 Chrome 中，每个条纹的边缘都是锯齿状的，与 FireFox 中的渲染相比，看起来有些不起眼。

background: repeating-linear-gradient(-60deg, rgba(231, 117, 29, 1.0), rgba(231, 117, 29, 1.0) 10px,rgba(236, 144, 74,1.0) 10px, rgba(236, 144, 74, 1.0) 20px) repeat scroll 0% 0% / 23px 100%;

看一些 1x 和 5x 缩放的比较图像：

在 5 倍缩放图像中，您可以看到在 FireFox 中条纹边缘已抗锯齿，而在 Chrome 中抗锯齿要么不存在要么非常差。

我有 Fiddle 显示效果，在 FireFox 和 Chrome 中并排运行时非常有特色：Fiddle

我已经尝试过什么？

我知道并尝试过来自先前问题和网络的建议，包括添加各种 CSS 技巧来强制 3d 加速（即translate(0)、perspective: 1000 等）和transform-style: preserve-3d。

我也知道在 Chrome 中使用 45 度角是平滑的。但是，由于我使用的矩形的形状，如果可能，我想使用 60 度角。

我想要什么结果？

我真的很想看到在 Chrome 中平滑渲染的条纹，就像在 FireFox 中一样。

我对如何实现这一点没有其他想法。

【问题讨论】：

Chrome 的唯一方法是避免使用相同的颜色停止...所以不要使用 10px ... 10px 试试 10px ... 11px 例如
@TemaniAfif 谢谢你的建议。我已经尝试过各种条纹宽度，遗憾的是，虽然它减少了锯齿状效果，但并没有消除它。
我认为 Chrome 没有办法消除它......顺便说一句，这里有一个类似的问题，我找到了一种方法来减少重复渐变：stackoverflow.com/questions/52111717/…

标签： css google-chrome linear-gradients

【解决方案1】：

我有同样的问题。我在没有 SVG 的情况下通过在颜色变化时添加一个渐变像素来解决它。示例：

background: repeating-linear-gradient(-60deg, white 0, blue 1px, blue 10px, white 11px, white 20px);

【讨论】：

【解决方案2】：

在接受了几个月的质量差之后，我终于找到了解决这个问题的方法，即使用 SVG 而不是 repeating-linear-gradiant。

我创建了一个包含条纹的 SVG，然后将其嵌入到条纹跨度中：

body {
  background: #20262E;
}

.slide {
  background-color: rgba(231, 117, 29, 1.0);
  border: 1px solid black;
  height: 80px;
  overflow: hidden;
}

.stripe {
  width: 120%;
  height: 100%;
  display: inline-block;
}

.stripe svg {
  animation: slide 1s linear infinite;
  color: rgba(236, 144, 74,1.0);
}

@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-40px); }
}

<div class="slide">
  <span class="stripe">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <defs>
        <pattern id="stripe" patternUnits="userSpaceOnUse" width="20" height="20" patternTransform="rotate(60)">
          <line x1="0" y="0" x2="0" y2="20" stroke="currentColor" stroke-width="20" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#stripe)" opacity="1" />
    </svg>
  </span>
</div>

.stripe 元素的宽度设置为父元素的 120%，以允许条带的右侧在容器内正确设置动画。

结果在这里清晰可见：

您可以看到，尽管 Chrome 和 FireFox 渲染条纹的方式略有不同，但 Chrome 正确地对其进行了抗锯齿处理，因此它看起来比以前更平滑。

还有一个Fiddle 表明这个工作正常。

【讨论】：