在firefox的边框图像旋转div的消除锯齿 [英] Anti-aliasing on rotated div with border image in firefox

问题描述

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

I have a div rotated 45 degrees, with a border image on it.

在chrome和safari中，它渲染得很好。

In chrome and safari, it renders fine.

在firefox中，旋转的div的边缘，边缘和边框图像之间出现讨厌的反锯齿线。

In firefox, nasty anti aliasing lines appear around the edge of the rotated div, between the edge of it and its border image.

这里是简单的HTML：

Here's the simple 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看看我的意思：

and here's a JSFiddle. Look at it in firefox to see what I mean:

http://jsfiddle.net / uAF2u /

我已经看到了在div上添加1px透明轮廓的提示，如果没有边框

I've seen the tips for adding a transparent outline of 1px around the div, which would work if it didn't have a border image as in this case.

任何人都遇到这种情况，知道如何排序？

Anyone run into this before and know of a way to sort it?

推荐答案

添加translateZ似乎更快，更精确的显示和解决问题：

Adding a translateZ seems to quick in a more accurate display and solve the issue:

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

更新小提琴

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

I added the translate in the transform since firefox has been going un-prefixed for 10 versions now.

这篇关于在firefox的边框图像旋转div的消除锯齿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！