How to fix this bug: border-image with transform will have lines-CodePudding

These are the bug lines enter image description here

run code snippet, you will see thoes lines.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.a {
  width: 650px;
  height: 350px;
  transition: all 1s linear;
  transform: scale(1.1);
  border: 60px solid transparent;
  border-image: url('https://i.stack.imgur.com/wEz5D.png') 60 stretch;
}

<div ></div>

CodePudding user response：

Adding translateZ(1px) fixes this somehow.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.a {
  width: 650px;
  height: 350px;
  transition: all 1s linear;
  -webkit-transform: scale(1.1) translateZ(1px); /* Chrome, Safari, iOS Safari / iOS WebView, Android */
  -moz-transform: scale(1.1) translateZ(1px); /* Firefox */
  -ms-transform: scale(1.1) translateZ(1px); /* Edge, Internet Explorer */
  -o-transform: scale(1.1) translateZ(1px); /* Opera, Opera mini */
  transform: scale(1.1) translateZ(1px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 60px solid transparent;
  border-image: url('https://i.stack.imgur.com/wEz5D.png') 60 stretch;
}

<div ></div>

CodePudding user response：

Remove transform:scale (1.1). That should work for you. if you want it to expand use other method.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.a {
  width: 650px;
  height: 350px;
  border: 60px solid transparent;
  border-image: url('https://i.stack.imgur.com/wEz5D.png') 60 stretch;
  object-fit:cover;
  transition: all 1s linear;
}

<div ></div>

CodePudding user response：

Try changing

  border: 60px solid transparent;

  border: 60px ridge transparent;

My Chrome version is 100.0.4896.75. And this change works for me . I Guess maybe there is a bug in border render while setting border-image. Hope this may help you.