Why linear-gradient does not work in Edge?

Question

I made a gradation. This worked on Firefox and Chrome. But in Edge the gradient is invalid. I referred to tools and documentation such as Autoprefixer and MDN, but could not figure out the cause of this.

How can I work around this bug in Edge?

.grad {
  --w: 3px;
  display: grid;
  place-items: center;
  width: 200px;
  height: 150px;
  background:
    linear-gradient(to right, transparent 6px, #000 6px calc(6px + var(--w)), transparent 9px) 0% 0% / 10% 10% repeat;
}

<span class="grad"></span>

---

• Edge: Microsoft Edge 44.18362.449.0, Microsoft EdgeHTML 18.18363
• Firefox: 76.0
• Chrome: 81.0.4044.138

Answer 1

Two adjacent positions in the linear-gradient spec are not understood by MS Edge. Therefore you should replace linear-gradient(..., #000 6px calc(6px + var(--w)), ...) with linear-gradient(..., #000 6px, #000 calc(6px + var(--w)), ...).

Demo below, works fine on Edge 44 (18).

span {
  --w: 3px;
}
.grad {
  display: grid;
  place-items: center;
  width: 200px;
  height: 150px;
  background:
    linear-gradient(to right, transparent 6px, #000 6px, #000 calc(6px + var(--w)), transparent 9px) 0% 0% / 10% 10% repeat;
}

<span class="grad"></span>

Apparently MS Edge does not correctly parse or process the color-stop-length production of the mini grammar for linear gradient arguments. The respective demo widget on MDN does not show either.