在Firefox中带有边框图像的旋转div上的抗锯齿

Question

我的div旋转了45度，上面有边框图像。

在chrome和safari中，它效果很好。

在Firefox中，讨厌的反锯齿线出现在旋转div的边缘周围及其边界图像之间。

这是简单的HTML：

<div class="container">

   <div class="corner">

   </div>

</div>

这是CSS：

.container {
    margin: auto;
    width: 400px;
    height: 400px;
    background-color: black;
    outline: 1px solid #333333;
    position: relative;
    overflow: hidden;
}

.corner {
    position: absolute;
    bottom: -68px;
    right: -66px;
    width: 86px;
    height: 82px;
    background-color: #F1F2F3;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    border-style: solid;
    border-width: 14px 16px 28px;

    -moz-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    -webkit-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    -o-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 fill repeat;

    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
}

这是一个JSFiddle。在Firefox中查看它，了解我的意思：

我已经看到了在div周围添加1px透明轮廓的技巧，如果在这种情况下没有边框图像，该技巧将起作用。

有人遇到过这种情况并且知道对其进行排序的方式吗？

Answer 1

添加translateZ似乎可以更快地显示更准确并解决问题：

-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: translateZ(1px) rotate(45deg);

我将转换添加到了转换中，因为firefox现在已经取消了10个版本的前缀。