有角度的 CSS 线性渐变在 Firefox 和 Edge 中不平滑

Question

我已经尝试找出这个 css 的问题有一段时间了，但没有任何运气：

  $body-gradient-0: #324359;
  $body-gradient-1: #304051;
  $body-gradient-2: #27394A;
  $body-gradient-3: #1C2C3E;
  $body-gradient-4: #172A40;
  $body-gradient-degrees: 150deg;

  .my-class {
    background: $body-gradient-1;
    background: -moz-linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: -webkit-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: -webkit-linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: -ms-linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: -o-linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
  }

萨斯迈斯特游乐场

这在 Chrome、Vivaldi、Opera（显然还有任何其他使用 Blink 引擎或 Chrome 的分支的浏览器）中产生了良好的结果

然而，Microsoft Edge、Firefox 和 Safari（我已经使用 Epiphany 进行了测试，它使用 WebKit，所以我猜测 Safari 也会有同样的问题）会产生以下结果：

如果您全屏打开屏幕截图，您会看到第一个屏幕截图平滑地穿过所有颜色，而第二个屏幕截图则在颜色之间“步进”，就好像它们是“硬边缘”一样。

我一直试图找出问题所在以及为什么会发生这种情况，但没有任何运气。有谁知道这个问题的原因是什么以及解决它的最佳方法是什么？

这是片段：

  $body-gradient-0: #324359;
  $body-gradient-1: #304051;
  $body-gradient-2: #27394A;
  $body-gradient-3: #1C2C3E;
  $body-gradient-4: #172A40;
  $body-gradient-degrees: 150deg;

  .my-class {
    background: $body-gradient-1;
    background: -moz-linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: -webkit-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: -webkit-linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: -ms-linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: -o-linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
    background: linear-gradient($body-gradient-degrees,$body-gradient-0 0%,$body-gradient-1 10%,$body-gradient-2 20%,$body-gradient-3 55%,$body-gradient-4 100%);
  }

.my-class {
  width: 1920px;
  height: 1080px;
  background: #304051;
  background: -moz-linear-gradient(150deg, #324359 0%, #304051 10%, #27394A 20%, #1C2C3E 55%, #172A40 100%);
  background: -webkit-gradient(150deg, #324359 0%, #304051 10%, #27394A 20%, #1C2C3E 55%, #172A40 100%);
  background: -webkit-linear-gradient(150deg, #324359 0%, #304051 10%, #27394A 20%, #1C2C3E 55%, #172A40 100%);
  background: -ms-linear-gradient(150deg, #324359 0%, #304051 10%, #27394A 20%, #1C2C3E 55%, #172A40 100%);
  background: -o-linear-gradient(150deg, #324359 0%, #304051 10%, #27394A 20%, #1C2C3E 55%, #172A40 100%);
  background: linear-gradient(150deg, #324359 0%, #304051 10%, #27394A 20%, #1C2C3E 55%, #172A40 100%);
}