当使用transfrom缩放父元素时，边框图像显示9条线 [英] Border-image shows 9-slice lines when parent element is scaled using transfrom

问题描述

我正在使用border-image属性来创建带有9切片的样式化组件.另外，我正在使用css transform: scale(x)属性根据屏幕尺寸缩小/放大我的元素.我遇到的问题是，当将scale设置为1、2、3等整数时，我的9切片组件看起来很好，但是如果它是浮点型，则边框显示9切片线/间隙，而我很难修复它.

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.

我尝试为border-image-slice和scale设置不同的值.最初认为，当小数点后的数字为奇数时会导致此问题，但是无论如何这都是一个奇数.

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>

预期的结果将是在使用缩放比例时在边框上没有显示线/间隙，或者我也愿意更改缩放比例的方式.无论屏幕大小如何，我基本上都希望在桌面应用程序上保持相同的布局.这是我正在开发的桌面游戏，它在UI端使用JS.

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.

当小数位数是整数时的预期结果，在这种情况下，将其设置为6:

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

当我将比例设置为6.25时注意这些行

Notice the lines when I set scale to 6.25

推荐答案

如果有人遇到相同的问题，这是不太可能的，但是我确实找到了解决方案，所以我将其付诸实践.

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.

您需要将perspective: 1px;添加到根styles()中，然后在任何使用transform: scale(x);的地方将其设置为transform: translateZ(0) scale(x);

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);

我仍在努力理解为什么可行，但至少可行.还有它的CSS，所以可能涉及到一些魔术.

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

这篇关于当使用transfrom缩放父元素时，边框图像显示9条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！