css - Firefox の回転の不具合を修正するには?

Question

残念ながら、現在の Firefox (24.0) ではレンダリングの不具合が発生していますが、Chrome (30) では同じコードが期待どおりにレンダリングされます。

コードは次のとおりです。http://dabblet.com/gist/6982745

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

基本的に、三角形を作成するために回転した白い四角 (:before と :after) で部分的に覆われた黒い四角 (.triangle) があります。黒い四角自体は 18 度回転します。これにより、Firefox は .triangle の周りにある種の灰色の境界線をレンダリングします - 両方の白い四角がこの領域のすべてのピクセルをカバーする必要がある場合でも。参考までに、Chrome ではこのような境界線を省略しています。少し実験したところ、グリッチは 0°、90°、180° 以外の回転でのみ発生することがわかりました...

私の質問は次のとおりです。私は何か間違ったことをしていますか? (三角形を作成するためのより簡単な方法があることは知っています。これは単純化された例にすぎません)。この不具合に対する回避策はありますか? 私はすでに box-shadow と border を試しましたが、どちらも成功しませんでした。

前もって感謝します ：）