border-image-Slice-Swaps horizontales und vertikales params in Chrome und FireFox

Question

Ich versuche nur horizontal (/ vertikal) Grenzen mit diesem Code zu machen:

.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%; 
} 

Es funktioniert. Aber nur in Chrome. Chrome

In Firefox-Zeilen Swap-Richtung. Sie werden vertikal: FF

Wenn ich ändere "border-image-slice: 100% 1%;" zu "border-image-slice: 1% 100%;" Browser ändern auch die Effekte.

Vielleicht jemand damit umgehen? Vielleicht habe ich etwas verpasst? Vielleicht existiert Cross-Browser-Lösung.

Answer 1

Das CSS in Ihrer Frage ist nicht das gesamte CSS, das Sie verwendet haben, um die Ausgabe in CodePen zu erzeugen. Es wäre nützlich, wenn Sie in Zukunft einen Link dazu bereitstellen würden. Mit dem Folgenden kann ich das Problem nicht reproduzieren. Ich erhalte die beiden horizontalen Seiten in beiden Browsern, so dass ich vermute, dass das Problem mit dem anderen CSS liegt:

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%; 
} 

See: https://jsfiddle.net/0j745Lzm/1/