firefox - Firefoxで不透明度を設定する際のSVG/Raphaelの問題

Question

ここで、Raphael.jsを使用してSVGを使用して描画するという非常に奇妙な問題に直面しています。描いた三角形に不透明度を設定すると、角が途切れます。ただし、ChromeとIEでは問題なく表示されます。同じ三角形の描画を使用して、不透明度を1に変更した場合、またはfill-opacity単にopacityではなく変更した場合、正しくレンダリングされます。さらに奇妙なことに、同じ正確なコードとライブラリを使用してjsFiddleでデモを作成すると、問題なくレンダリングされます。Raphael.jsのバージョンを再確認したり、万が一に備えて更新したりしました。

誰かがこれがどのように起こっているのか考えていますか？

これが私が使用しているコードです：

            var paper = Raphael(0,0, 800, 800);
            var triangle1 = paper.path('M295,738 l0,-738 l500,0 Z')
            var triangle2 = paper.path('M200,200 l0,-100 l100,0 Z')

            triangle1.attr({
                fill: '#fff',
                'opacity': '0.5'
            });

            triangle2.attr({
                fill: '#fff',
                opacity: 1,
                stroke: 'red'
            });

これがjsFiddleです：http： //jsfiddle.net/crisp330/26PaS/

そして、これが私のFFバージョン16.0.2でどのように見えるかです：http： //grab.by/hBWK

jsFiddleからiFrameソースを直接コピーして（FFでは正しいように見えます）、新しいHTMLページに貼り付けました...いいえ！コーナーは再びカットオフされます。

何が起こっているのかについて何かアイデアはありますか？