css - Firefox:设置了 border-radius 的多个边框相互叠加，显示参差不齐的边缘

Question

HTML

<div id='loader'>
    <div id='loaderLargeSlice' class='loaderSlice'>
        <div class='arc'></div>
        <div class='arc'></div>
        <div class='arc'></div>
    </div>
</div>

CSS

#loader{    
    position: relative;
    width: 100px; 
    height: 100px;
    margin: 14px;
    border-radius: 50%;
    background: none;
}

.loaderSlice
{
    position:absolute;
    display:block;

    opacity: 0.5;
}

#loaderLargeSlice
{
    height: 100px;
    width: 100px;

    animation: spin 4s linear 0s infinite forwards;
    -webkit-animation: spin 4s linear 0s infinite forwards;
}

.arc
{
    position: absolute;
    top: -14px;
    left: -14px;
    width: 100%;
    height: 100%;
    background: none;
    border: 14px solid rgba(0,0,0,0);
    border-top-color: black;
    border-radius: 50%;
}

.arc + .arc
{
    transform: rotate(70deg);
    -webkit-transform: rotate(70deg);
}

.arc + .arc + .arc
{    
    transform: rotate(140deg);
    -webkit-transform: rotate(140deg);
}

问题

Firefox 显示参差不齐的边缘

有人知道修复方法吗？

Answer 1

回答为无法修复。请参阅@Eevee 对主帖的评论。