css - Firefox でこの視覚的な不具合を解決するにはどうすればよいですか?

Question

私は将来のプロジェクトで使用する小さな LESS フロントエンド ライブラリに取り組んでいます。また、それが完成して有用であると判断されたら、オープン ソース ライセンスでリリースする予定です。

このライブラリには、洗練された Chrome スタイルのタブが含まれます。CS3 境界半径を使用した現在の実装はかなり大まかで、インターネットで見つけたフィドルに基づいており、Webkit 以外のブラウザーはまったくサポートされていません。さまざまなプロジェクトで使用されるため、ほとんどの主要なブラウザーと互換性を持たせる必要があります。微調整を行った後、FF と Chrome ではほぼ同じように見えますが、Firefox では視覚的な不具合があります。

関連する LESS ソース パーツ:

// Tabs
.fancy-tabs(@tab-color; @active-tab-color; @hover-tab-color; @click-tab-color)
{
    margin: 0;
    list-style-type : none;
    line-height : 35px;
    max-height: 35px;
    overflow: hidden;
    display: inline-block;
    padding-right: 20px;

    >li
    {
        .fancy-tab(@tab-color; @active-tab-color; @hover-tab-color; @click-tab-color);
    }
}

.fancy-tab(@tab-color; @active-tab-color; @hover-tab-color; @click-tab-color)
{
    // Links
    a
    {
        // To make the other parts of the tab clickable
        padding: 0 1em;
        margin: 0 -1em;

        display: inline-block;
        // max-width:100%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
        color: inherit;
    }

    // Styling the tab
    float : left;
    margin : 5px -10px 0;
    border-top-right-radius: 25px 170px;
    border-top-left-radius: 20px 90px;
    padding : 0 30px 0 25px;
    height: 170px;
    background: @tab-color;
    position : relative;
    box-shadow: 0 10px 20px rgba(0,0,0,.5);
    max-width : 200px;
    .transition(all .2s);

    // Indent the first child
    &:first-child
    {
        margin-left: 10px;
    }

    // Fancy rounding
    &:before, &:after{
        content : '';
        background : @transparent;
        height: 20px;
        width: 20px;
        border-radius: 100%;
        border-width: 10px;
        top: 0px;
        border-style : solid;
        position : absolute;
        .transition(inherit);
    }

    &:before{
        border-color : @transparent @tab-color @transparent @transparent;
        .rotate(48deg);
        left: -23px;
    }

    &:after{
        border-color : @transparent @transparent @transparent @tab-color;
        .rotate(-48deg);
        right: -17px;
    }

    // Colorize active tab

    &:active{
      background: @click-tab-color;
    }


    &:hover:before{
      border-color : @transparent @hover-tab-color @transparent @transparent;
    }


    &:hover:after{
      border-color : @transparent @transparent @transparent @hover-tab-color;
    }

    &:active:before{
        border-color : @transparent @click-tab-color @transparent @transparent;
    }


    &:active:after{
        border-color : @transparent @transparent @transparent @click-tab-color;
    }

    &.ac
    {
        z-index: 2;
        background: @active-tab-color !important;

        &:before{
            border-color : @transparent @active-tab-color @transparent @transparent;
        }


        &:after{
            border-color : @transparent @transparent @transparent @active-tab-color;
        }
    }


    // Applying pointer effects
    .hover(highlight, @hover-tab-color);
    .click(highlight, @click-tab-color);
}

コンパイルされた CSS を使用してフィドル: http://jsfiddle.net/kdani3/G9QE9/1/

この問題は、Gecko の境界半径レンダリング エンジンに関連している可能性が高いと思いますが、回避策はわかりません。

スクリーンショット: