firefox - 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 中看一下就明白我的意思了:

http://jsfiddle.net/uAF2u/

我看过有关在 div 周围添加 1px 透明轮廓的提示，如果它没有像本例中那样的边框图像，这将起作用。

有没有人以前遇到过这个问题并且知道如何对其进行排序？

Answer 1

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

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

updated fiddle

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