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

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。

scale 为整数时的预期结果，在本例中设置为 6:

注意当我将比例设置为 6.25 时出现的线条

Answer 1

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

你需要添加 perspective: 1px; 到根 styles() 然后无论你在哪里使用 transform: scale(x); 让它 转换:translateZ(0) scale(x);

我仍在尝试理解为什么它有效，但至少有效。以及它的 CSS，因此可能涉及一些魔法。