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，用火狐浏览器查看以了解我的意思：

http://jsfiddle.net/uAF2u/

我看到添加1像素透明轮廓线的提示，但是如果使用边框图像就行不通。

有人遇到过这种情况并知道如何解决吗？

- user3071264

---

请参见以下链接：https://dev59.com/Emox5IYBdhLWcg3wYzfX - Bastian Rang

Answer 1

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

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

更新后的 Fiddle

我把 translate 属性添加到 transform 中，因为 Firefox 已经连续 10 个版本取消了前缀。

- vals

Answer 2

transform: rotate(0.0005度);

FireFox 34

这对我有效。

- theo

Answer 3

我在Firefox中遇到了一个非常类似的问题，即变换的div有一个薄边框轮廓，我通过给div一个透明的边框来修复它。 也许这可以帮助解决你的问题。

- han

Answer 4

我在Firefox和Safari上也遇到了同样的问题，就是兄弟div之间有一条细线。

还可以尝试不同的组合：

border-radius: 2px 0 0 0;

或者

border-radius: 0 1px 0 0;

在存在问题的元素上。

这似乎主要在Firefox中有效，在Safari中稍微有些作用。在Safari中，您还必须引起重叠的定位元素。

- jj2020driver