比Chrome更好的解决方案(translateZ(0))解决亚像素边框图像缩放问题

我遇到了边界图像切片线出现在使用transform:scale()进行了缩放的元素上的问题,如下所示。这似乎仅在Chrome中发生。

enter image description here

通读其他帖子,这似乎是一个Chrome亚像素渲染问题。我尝试了[背面可见性:隐藏],但似乎无济于事。我确实找到的解决方案是将[perspective:1px;]应用于父元素,并将[transform:translationZ(0);]应用于相关元素。虽然这样做确实消除了线条,但是图像变得明显模糊(大概是因为它正在重新转换)。目前是否使用translateZ(0)是解决问题的唯一(或最佳)方法?我正在使用香草JS。

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

    .tile{
        height:100%;
        width:100%;

        border: 0px solid transparent;
        border-image-source: url(img/tile_border_double.png);
        border-image-slice: 10 fill;
        border-image-width: 10px;
        border-image-outset: 8px 2px 2px 8px;
        box-shadow: 1px 1px 4px #666;
    }