Почему не работает градиент на body в псевдоэлементе?

Question

[Полина Емельянова]

Коллеги, прошу поясните, почему не работает градиент, который лежит в псевдоэлементе?
Должны появиться 3(три) ВЕРТИКАЛЬНЫЕ линии красного цвета.
Префиксы есть.
Направление указываю.
При чем на Мозилле, на некоторой ширине полоски сливаются в одну. Это и на кодепене заметно, так то.

Что я делаю не так?



Или не работает в хроме/лисе.

Comments

[IvanU7n]

а зачем там -moz-linear-gradient вроде без него всё работает как положено

[IvanU7n]

да и градиент можно немного сократить:

background: linear-gradient(
  90deg,
  transparent 0 calc(25% - 1px),
  var(--light) 0 25%,
  transparent 0 calc(50% - 1px),
  var(--light) 0 50%,
  transparent 0 calc(75% - 1px),
  var(--light) 0 75%,
  transparent 75%
);

[Полина Емельянова]

IvanU7n, Благодарю за ответ.Но только в Лисе ничего не работает.(((
Хром да, исправился.

[Ankhena]

Похоже на какую-то беду с округлениями.

Замените на что-то типа 90deg, red 0 1px, transparent 1px; и сделайте повторяющимся. Т.е. чтобы палка была по краю градиента без calc. Либо наоборот, справа, как удобнее.

[IvanU7n]

Полина Емельянова, соглашусь с Ankhena, очень похоже на какие-то глюки с рисованием, т.к. только линия шириной в 4 пикселя показывается в огнелисе
вообще у меня нормально завелось только с:

background: linear-gradient(90deg, var(--light) 0 1px, #fff0 0) border-box;
background-size: 25% 100%;

что возможно не совсем то, что нужно