为什么border-image-source在Chrome中显示正常但在Safari中搞砸了？

Question

我正在建立一个网站：

http://padthai.decorolux.com/

我想在菜单中创建一个悬停动画。在Chrome上，它看起来很好，但是当我在Safari中查看它时，圆圈看起来应该是这样，但在它上方也会出现一条虚线。我确定这是因为/ * border-style：dotted; * / property，但我似乎无法找到解决方法。如果删除它，动画也无法正常显示。

有什么建议吗？

代码

.custom_menu.x-menu>li>.x-anchor .x-anchor-particle-primary {
    width: 100%;
    height: 0;
    border-style: dotted;
    border-color: #ED3729;
    border-image-source: url('http://padthai.decorolux.com/wp-content/uploads/dots.svg');
    border-image-slice: 33% 33%;
    border-image-repeat: round;
    border-width: 8px;
    border-top: none;
}