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

Posted

技术标签:

【中文标题】Firefox中带有边框图像的旋转div上的抗锯齿【英文标题】:Anti-aliasing on rotated div with border image in firefox 【发布时间】:2013-12-22 18:26:58 【问题描述】:

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

在 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 透明轮廓的提示,如果它没有像这种情况下的边框图像,这将起作用。

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

【问题讨论】:

见***.com/questions/9235342/… 【参考方案1】:

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

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

updated fiddle

我在转换中添加了翻译,因为 firefox 现在已经有 10 个版本没有前缀了。

【讨论】:

【参考方案2】:

变换:旋转(0.0005deg);

火狐 34

这对我有用。

【讨论】:

【参考方案3】:

我在 Firefox 中遇到了一个非常相似的问题,其中转换的 div 的边框轮廓很薄,我通过给 div 一个透明的边框来修复它。 这可能会有所帮助。

【讨论】:

【参考方案4】:

我对 Firefox 和 Safari 也有同样的问题。兄弟 div 之间有 1 条细线。

尝试不同的组合:

border-radius: 2px 0 0 0;

border-radius: 0 1px 0 0;

关于有问题的元素。

这似乎主要在 Firefox 和 Safari 中起作用。 在 Safari 中,您还必须导致重叠的定位元素。

【讨论】:

以上是关于Firefox中带有边框图像的旋转div上的抗锯齿的主要内容,如果未能解决你的问题,请参考以下文章

Pixelart 的抗锯齿算法

游戏中的抗锯齿杂谈

UE4在PSVR中的抗锯齿和优化相关知识

CSS 删除图像上的虚线边框(例如,在Firefox中)

删除图像上的虚线边框(例如,在Firefox中)

删除图像上的虚线边框(例如,在Firefox中)