Why linear-gradient does not work in Edge? - html

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.

Answer 2

Did you check if it has a padding. If you click to determine, so where you can see your padding and margin properties. Or you try to get a gradient from an Internet Tool.
OR the problem is because of the browser. Edge is not the best.
.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>