在firefox和edge中有角度的CSS线性渐变不平滑

我一直在试图找出这个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%);
  }

sassmeister playground

但是,Microsoft Edge、Firefox和Safari(我用Epiphany测试过它,它使用的是WebKit,所以我猜Safari也会有同样的问题)会产生以下结果:

如果你全屏打开截图,你会看到第一个是顺利通过所有的颜色,而第二个是相当“踏步”之间的颜色,好像他们是“硬边”。

以下是片段:

.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%);
}

<div class="my-class">
</div>