Почему линейный градиент не работает в Edge?

Question

Я сделал градацию. Это сработало на Firefox и Chrome. Но в Edge градиент недопустим. Я сослался на инструменты и документацию, такие как Autoprefixer и MDN, но не смог выяснить причину этого.

Как я могу обойти эту ошибку в 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 Edge HTML 18.18363
• Firefox: 76.0
• Chrome: 81.0.4044.138

Answer 1

Две соседние позиции в linear-gradient spe c не распознаются MS Edge. Поэтому вам следует заменить linear-gradient(..., #000 6px calc(6px + var(--w)), ...) на linear-gradient(..., #000 6px, #000 calc(6px + var(--w)), ...).

Демо ниже, отлично работает на 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>

По-видимому, MS Edge неправильно анализирует или обрабатывает color-stop-length создание мини-грамматики для аргументов линейного градиента. Соответствующий демонстрационный виджет на MDN тоже не отображается.

Answer 2

Вы проверяли, есть ли у него прокладка. Если вы нажмете, чтобы определить, где вы можете увидеть свои свойства заполнения и поля. Или вы пытаетесь получить градиент с помощью инструмента Inte rnet.

ИЛИ проблема из-за браузера. Эдж не самый лучший.

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