使用border-image制作渐变边框 ios兼容性问题

为盒子设置左侧边框渐变效果，代码如下：

 .box1 {
        height: 200px;
        width: 200px;
        background-color: #f1f1f1;
        padding: 15px;
        box-sizing: border-box;
        border: none;
        border-left: 1px solid #155799;
        border-image: linear-gradient(#155799, #159957) 30 30;
    }

pc、安卓 下的显示效果：

在iOS上的显示效果：

改成以下写法即可显示效果一致:

 .box2 {
        height: 200px;
        width: 200px;
        background-color: #f1f1f1;
        padding: 15px;
        box-sizing: border-box;
        border-top: solid 0 transparent;
        border-bottom: solid 0 transparent;
        border-right: solid 0 transparent;
        border-left: 1px solid #155799;
        border-image: linear-gradient(#155799, #159957) 30 30;
    }

下方是ios上的效果 (box1为第一种写法 box2为第二种写法)

线上demo: https://demo.crazyming.com/?link=border/border-image-ios.html