Angled CSS linear gradient not smooth in firefox and edge

Question

I've been trying to figure out what's the issue with this css for a while now without any luck:

  $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

This produces fine results in Chrome, Vivaldi, Opera (and apparently any other browser which is using the Blink engine or is a fork of Chrome)

However, Microsoft Edge, Firefox and Safari (I've tested it with Epiphany, which is using WebKit, so I'm guessing that Safari will also have the same issue) produce the following:

If you open the screenshots in full-screen, you will see that the first one is smoothly going through all of the colors, while the second one is rather "stepping" between colors as if they are "hard edges".

I've been trying to figure out what is the issue and why it's happening without any luck. Does anybody know what's the reason for this issue and what's the best way to fix it?

Here is the snippet:

.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>