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 等.) 和 transform-style: preserve-3d.

我也知道在 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);

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

Rendering issue with repeating linear gradient in Chrome

css

google-chrome

linear-gradients