Border-image shows 9-slice lines when parent element is scaled using transfrom

问题

I am using border-image property to create styled components with 9-slice. Also I am using css transform: scale(x) property to scale down/up my elements based on screen sizes. The issue I am running into is that my 9-slice component looks fine when scale is set to a whole number like 1, 2, 3... but if its a float then the border shows 9-slice lines/gaps and I am having hard time fixing it.

I have tried setting different values for border-image-slice as well as the scale. Initially thought that it was causing this issue when the number after decimal point is odd but that was an odd thought anyway.

<div class="Primary-Back-Button" style="transform: scale(1.2);">
  <button class="Primary-Button" id="">
     <div class="Primary-Button-Content">Button</div>
  </button>
</div>

Expected result would be to show no lines/gaps on the border when using scale or I would be willing to change how we scale the things too. I basically want to keep the same layout on a desktop app no matter what the screen size is. This is for a desktop game that I am working on and it uses JS on UI side.

Expected result when scale is a whole number which is set to 6 in this case:

Notice the lines when I set scale to 6.25

回答1:

If anyone ever run into the same issue which is very unlikely but I did figure out a solution so I am gonna put it out there.

You will need to add perspective: 1px; to the root styles() and then wherever you are using transform: scale(x); make it transform: translateZ(0) scale(x);

I am still trying to understand why that works but at least works. And its CSS so there could be some magic involved.

来源：https://stackoverflow.com/questions/57894977/border-image-shows-9-slice-lines-when-parent-element-is-scaled-using-transfrom

标签

css

reactjs

css-transforms

scaletransform

border-image