使用变换缩放功能时出现白线

Question

我正在使用border-image 属性来创建具有 9 切片的样式组件。此外，我正在使用 css transform: scale(x) 属性根据屏幕尺寸缩小/放大我的元素。我遇到的问题是，当比例设置为整数（如 1、2、3 ......很难修复它。

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

<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。

当比例为整数时的预期结果，在这种情况下设置为 6：

当我将比例设置为 6.25 时，请注意线条

Answer 1

如果有人遇到同样的问题，这不太可能，但我确实找到了解决方案，所以我会把它放在那里。

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

我仍在试图理解为什么它有效，但至少有效。还有它的 CSS，所以可能会涉及到一些魔法。