Google Chrome中的边框图像透明条纹

Question

我正在将CSS3 border-image与scale3d转换结合使用。效果不错，谷歌浏览器除外。 Chrome在边框图像图块之间显示一些透明条纹，背景剪裁在其中。

我制作了截图：

以下是HTML代码：

<div class="frame scale">
Hello Hello<br/>
Hello Hello<br/>
Hello Hello<br/>
Hello Hello<br/>
</div>

CSS代码：

body{
  background-color: red;
}
div{
  display: inline-block;
  position: absolute;
  top: 170px;
  left: 170px;
  background-color: transparent;
  transform: scale3d(3.1,3.1,1);
}

.frame{
    padding: 5px;
    border-style: solid;
    border-width: 38px 28px 37px 18px;
    -webkit-border-image: url(https://picload.org/image/rgrocaia/roll13_t1_small1_25.png) 38 28 37 18 stretch;
       -moz-border-image: url(https://picload.org/image/rgrocaia/roll13_t1_small1_25.png) 38 28 37 18 stretch;
         -o-border-image: url(https://picload.org/image/rgrocaia/roll13_t1_small1_25.png) 38 28 37 18 stretch;
}

我也为你做了一个小提琴：https://jsfiddle.net/kd7sz0s5/1/

问题似乎与scale3d命令有关。因为当我将scale3d值设置为偶数时（例如scale3d（3,3,1）），条纹正在消失。

希望你们能帮帮我。