CSS / border-image / border-image-slice / causing very small gaps like division lines

I have the following code:

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>border-image slice issue</title>
<style type="text/css">
.container {
  width: 600px;
  height: 344px;
  background-color: rgb(255, 245, 187);
}
.frame {
  opacity: 1;
  position: absolute;
  display: block;
  width: 800px;
  height: 1000px;
  background-image: url('https://i.ibb.co/wQSgvS7/jessica.jpg'), url('https://i.ibb.co/1ssy41c/mcol-papyrus-bg.png');
  background-size: 500px 700px, auto;
  background-position: center center;
  background-repeat: no-repeat, repeat;
  border-width: 0;
  border-image: url('https://i.ibb.co/N22Y8qg/fra-basic-black-wood-bg.png') repeat;
  border-image-slice: 100 fill;
  border-image-width: 100px;
  border-style: inset;
  transform-origin: 0px 0px;
  transform: matrix(0.344, 0, 0, 0.344, 162.4, 0); /* keep this line */
}
</style>
</head>
<body>
  <div class="container">
    <div class="frame"></div>
  </div>
</body>
</html>

Which you can find on:

https://codesandbox.io/s/q8nm9v2k34

Here there is a preview:

https://q8nm9v2k34.codesandbox.io

My problem is that on Chrome there are some small gaps like division lines as you can see on the following images:

Chrome: - BAD (please, notice the tiny division lines on the corners)

Firefox: - OK

Here you have the stats:

Window:

Chrome: BAD
Firefox: OK
Edge: OK

Mac:

Chrome: BAD
Safari: BAD

Could you please, fork my Codesandbox.io above, apply your solution, and paste its link here?

Thanks!

Solution

One idea is to split the image and add more background layers and you can have a better result.

.frame {
    display: block;
    width: 800px;
    height: 1000px;
    background: 
      url(https://i.ibb.co/wQSgvS7/jessica.jpg) center/500px 700px no-repeat padding-box, 
      url(https://i.ibb.co/1ssy41c/mcol-papyrus-bg.png) padding-box,
      /* Corners */
      url(https://i.sstatic.net/TvoN2.png) bottom left /100px 100px border-box no-repeat,
      url(https://i.sstatic.net/GzJik.png) top    left /100px 100px border-box no-repeat,
      url(https://i.sstatic.net/0r7ag.png) top    right/100px 100px border-box no-repeat,
      url(https://i.sstatic.net/3yWVf.png) bottom right/100px 100px border-box no-repeat,
      /* Borders */
      url(https://i.sstatic.net/Mhf03.png) bottom/100px 100px border-box repeat-x,
      url(https://i.sstatic.net/h51w6.png) left  /100px 100px border-box repeat-y,
      url(https://i.sstatic.net/Jt4uz.png) top   /100px 100px border-box repeat-x,
      url(https://i.sstatic.net/sp0wZ.png) right /100px 100px border-box repeat-y;
    border: 100px solid transparent;
    transform-origin: 0px 0px;
    transform: matrix(0.344, 0, 0, 0.344, 162.4, 0); /* keep this line */  
  }
body { 
 background:pink;
}

<div class="frame"></div>