Javascript 比translateZ（0）更好地解决Chrome中的亚像素边界图像缩放问题

在使用transform:scale（）放大的元素上显示的边框图像切片线有一个问题，如下所示。这似乎只发生在Chrome中

阅读其他帖子，这可能是Chrome的亚像素渲染问题。我尝试过[backface visibility:hidden]，但似乎没有效果。我确实找到了一个解决方案，将[perspective:1px；]应用于父元素，将[transform:translateZ（0）；]应用于相关元素。虽然这确实删除了线条，但图像变得明显模糊（可能是因为它正在被重新变换）。使用translateZ（0）目前是解决此问题的唯一（或最佳）方法吗？我用的是香草JS

下面是如何应用边框图像css

#外部{
高度：200px；
宽度：200px；
边框：1px实心#333；
变换：比例（1.22）
}
#瓦片{
身高：50%；
宽度：50%；
位置：相对位置；
顶部：50px；
左：50px；
边框：0px实心透明；
边框图像源：url(https://i.stack.imgur.com/Vz5jN.png);
边界图像切片：10次填充；
边框图像宽度：10px；
边框图像开始：8px 2px 2px 8px；
盒影：1px 1px 4px#666；
滤光片：亮度（30%）
}

通过将边框图像转换为.svg，我可以部分解决这个问题。

这与其说是一种解决方案，不如说是一种变通方法，但它完全去除了线条，并保持了图像的清晰度。（不过，现在我遇到了一些抗锯齿问题，我假设边界线的某些部分会根据比例而闪烁。）
使用相关链接共享png图像：我也对这个问题的解释感兴趣。相关问题：