为什么Safari渲染我的边框图像错误？

Question

我有一个带有CSS border-image的div：

＆＃13;

＆＃13;

.bc-test-labels {
  border-top: 30px solid black;
  border-image: repeating-linear-gradient(90deg, transparent, transparent 20px, black 20px, black 30px, transparent 30px, transparent 50px) 1;
}

＆＃13;

<div class="bc-test-labels">
  <br>
</div>

＆＃13;

＆＃13;

＆＃13;

在macOS上的Chrome中，我执行大部分测试时看起来像预期的那样：

Firefox也一样：

它也适用于Edge - 甚至Internet Explorer 11.不幸的是，在桌面和iOS Safari上，它呈现如下：

出于某种原因，border-image也会在底部，左侧和右侧呈现。

在Web Inspector中，我们可以看到整个<div>周围的3px边框，以及顶部的30px边框：

在样式下 - ＆gt;视觉 - ＆gt;背景 - ＆gt;边框部分我们可以看到顶部有指定的样式和高度，左，右和底部有style:none：

添加border: 0px作为CSS定义的第一行修复了这个问题，但是需要它有点烦人。

为什么Safari使用我的图像渲染所有边框，而不仅仅是我指定的边框？