Firefox 中带有边框图像的旋转 div 上的抗锯齿 [英] Anti-aliasing on rotated div with border image in firefox

问题描述

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

在 chrome 和 safari 中，它呈现得很好.

在 firefox 中，旋转 div 的边缘周围出现令人讨厌的抗锯齿线，在其边缘与其边框图像之间.

这是简单的 HTML:

<div class="corner">

这里是 CSS:

.container {保证金:自动；宽度:400px；高度:400px；背景颜色:黑色；轮廓:1px 实心 #333333；位置:相对；溢出:隐藏；}.角落 {位置:绝对；底部:-68px；右:-66px；宽度:86px；高度:82px；背景色:#F1F2F3；-webkit-transform:旋转(45度)；-moz 变换:旋转(45 度)；-ms-transform:旋转(45度)；-o-变换:旋转(45度)；变换:旋转(45度)；-webkit-backface-visibility:隐藏；-moz-backface-visibility:隐藏；-ms-backface-visibility:隐藏；-o-背面可见性:隐藏；背面可见性:隐藏；边框样式:实心；边框宽度:14px 16px 28px；-moz-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 重复；-webkit-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 重复；-o-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 重复；边框图像:url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 填充重复；-moz-background-clip:填充；-webkit-background-clip:填充；背景剪辑:填充框；}

这里有一个 JSFiddle.在 Firefox 中查看它以了解我的意思:

http://jsfiddle.net/uAF2u/

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

有没有人遇到过这种情况并且知道如何对其进行排序?

解决方案

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

-webkit-transform:rotate(45deg);-ms-transform:旋转(45度)；-o-变换:旋转(45度)；变换:translateZ(1px)旋转(45度)；

更新小提琴

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

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

In chrome and safari, it renders fine.

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

Here's the simple HTML:

<div class="container">

   <div class="corner">

   </div>

</div>

and here's the 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;
}

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

http://jsfiddle.net/uAF2u/

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?

解决方案

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);

updated fiddle

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

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