border-image-slice меняет горизонтальные и вертикальные параметры в Chrome и FireFox

Question

Я пытаюсь сделать только горизонтальные (/ вертикальные) границы с этим кодом:

.test {
    border-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(to bottom, hsl(0, 0%, 97%), hsl(19, 0%, 75%), hsl(0, 0%, 97%));
   border-image-slice: 100% 1%;
}

Оно работает. Но только в Chrome. Хром

В Firefox линии меняются местами. Они становятся вертикальными: FF

Если я изменю "border-image-slice: 100% 1%;" to "border-image-slice: 1% 100%;" браузеры тоже меняют эффекты.

Может, кто-то с этим справится? Может я что то пропустил? Возможно существует кросс-браузерное решение.

Answer 1

CSS в вашем вопросе - это не весь CSS, который вы использовали для создания вывода в CodePen. Было бы полезно, если бы вы предоставили ссылку на него в будущем. Со следующим я не могу воспроизвести проблему. Я получаю две горизонтальные стороны в обоих браузерах, поэтому я подозреваю, что проблема заключается в другом CSS:

HTML

<div class="repeating-linear">
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  background-color: #000000;
}

.repeating-linear {
    width: 500px;
    height: 500px;
    border-style: solid;
    border-width: 1px;
    border-image-source: linear-gradient(to bottom, hsl(0, 0%, 97%), 
        hsl(19, 0%, 75%), hsl(0, 0%, 97%));
    border-image-slice: 100% 1%;
}

Смотрите: https://jsfiddle.net/0j745Lzm/1/