5

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)

working gradient

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:

wrong gradient

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>
Hai Pham
  • 2,188
  • 11
  • 20
tftd
  • 16,203
  • 11
  • 62
  • 106
  • I try to check the picture and also try to produce the issue using your code but there is no gradient on page. I can only see black colored div. I am not able to see other colors. Can you try to provide detailed information about your issue? I will try to refer it to produce the issue. – Deepak-MSFT Dec 03 '18 at 06:42
  • I think I've covered everything in the question, but if you have questions - feel free to ask. It's strange you're not seeing the gradient - what browser are you using? – tftd Dec 03 '18 at 13:36

0 Answers0