css - Google Chrome でのボーダー画像の透明なストライプ

Question

CSS3 ボーダー画像を scale3d 変換と組み合わせて使用​​しています。Google 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))。

皆さんが私を助けてくれることを願っています。