Question

我担心我在当前的Firefox（24.0）中遇到渲染故障，而Chrome（30）渲染的代码与预期相同。

HTML：

<div class="triangle"></div>

CSS：

.triangle {
    height: 50%;
    width: 40%;

    position: relative;
    top: 50px;
    left: 50px;

    background-color: black;
    overflow: hidden;
    /*
     * Here comes the malicious line:
     */
    transform: rotate(-18deg);
}
.triangle:before {
    content: "";
    width: 200%;
    height: 300%;
    position: absolute;

    background-color: white;

    transform-origin: left top;
    transform: rotate(-52deg);
}
.triangle:after {
    content: "";
    width: 200%;
    height: 300%;
    position: absolute;
    top: 38%;

    background-color: white;

    transform-origin: left top;
    transform: rotate(26deg);
}

基本上，有一个黑色正方形（.triangle），它被旋转的白色方块（：之前和之后）部分覆盖，以创建一个三角形。黑色方块本身旋转了18度 - 这导致Firefox在.triangle周围呈现某种灰色边框 - 即使两个白色方块都应覆盖此区域中的每个像素。 Chrome作为参考，省略了这样的边框。一个小小的实验告诉我，毛刺只发生在0°，90°，180°以外的旋转......

我的问题是：我做错了吗？（我知道有更简单的方法来创建一个三角形 - 这只是一个简化的例子）这个小故障有没有已知的解决方法？我已经尝试了盒子阴影和边框 - 两者都没有成功。

提前致谢：）

如何修复Firefox旋转故障？

0 个答案: