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

Question

我遇到重复线性渐变的错误，该错误影响了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%;

以1倍和5倍变焦查看一些比较图像：

在5倍缩放图像中，您可以看到在FireFox中条纹边缘被消除了锯齿，而在Chrome中没有消除锯齿或消除了锯齿。

我让Fiddle展示了这种效果，当在FireFox和Chrome中并排运行时，这种效果非常独特：Fiddle

我已经尝试了什么？

我知道并尝试了先前问题和网络上的建议，包括添加各种CSS技巧以强制进行3d加速（即translate(0)，perspective: 1000等）和{{ 1}}。

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

我想要什么结果？

我真的很想看到Chrome中的条纹与FireFox中一样平滑。

我只是没有其他关于如何实现这一目标的想法。

Answer 1

在接受了几个月的质量差后，我终于找到了解决此问题的方法，该方法涉及使用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可以显示此工作。

Answer 2

我有同样的问题。当颜色改变时，我通过添加单个渐变像素解决了不使用SVG的问题。示例：

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