border-image-repeat: round 設定の safari の表示を一致させるハック

Question

border-image-repeat というCSSを知り、あまりの便利さに感激しています。
しかしながら、safariにおいては round 設定で他のブラウザと表示が異なってしまいます。

chrome,firefox,opera

safari

バグとして以前から報告されているようですが、現時点(2018-10-22)で改善されていません。
Bug 155955 - border-image-repeat:round output doesn't match other browsers

CSSハックなどで safari でも他のブラウザと同じに表示する方法はあるでしょうか？
あるいは border-image-repeat に代替するような機能がありましたら教えてください。

いま、思いついているのはsafariだけ、事前に ２回繰り返しの画像 を用意して指定する方法です。
safariだけ適用するために下記のCSSハックを利用
css hacks 2018 ( IE11 / Edge / Chrome / Safari / Firefox )

よろしくおねがいします。

Answer 1

２年以上前の質問に回答つけるのもアレですが

2021-01いまだに解決されていないので自分の取った方法

この問題はSafariのborder-image-repeat:roundの時の基準のサイズが
表示上の拡大縮小率を考慮しない実際の画像のサイズに基づいているためと思われます

border-image-sliceとborder-image-widthの値が
一致しているとこの問題は起きません

なので表示上のサイズと実際のサイズを合わせるために
画像を表示サイズに合わせて縮小して配置したSVGにしています

画像ファイルサイズは重くなってしまいますが
border-image-repeat:roundで使う画像なので
そこまで大きくないはず…