UGLY BORDERバグ、位置：相対>位置：絶対>ボーダー半径：50％、フィドル

Question

https://jsfiddle.net/0h3rqqru/

<div style="position:relative; width:500px; height:500px; background:blue; border-radius:50%;"> 
    <span style="position:absolute; width:100%; height:100%; background:white; border-radius:50%;"></span> 
</div> 

私の問題は、位置を有する場合に、奇数境界は、最大表示されていることである参照：の内部絶対位置：ボーダー半径の相対値：50％。

解決策を探していましたが、回答が見つかりませんでした。

Iveは、「円グラフ」というやや高度なものを構築する日に取り組んできました。この国境の問題のほかに、すべてが機能します。境界問題の解決策がなければ、私もゴミ箱に投げ捨ててしまうかもしれません。」（

バグで表示：EdgeとChrome、また適用するとFirefoxに表示されます：transform：rotate（90deg）、to 。アイブ氏は、私が解決しようとしているものをより具体的に示すための円グラフでcodepen作成した絶対的な要素

UPDATE

： https://codepen.io/anon/pen/evXJPw

Answer 1

背景取り外します。青を、あなたの外側容器から をかその背景色が本当に必要な場合は、pos反復処理が終了したら、1pxのボーダーを使用して背景のギャップを隠します。ここではFFでうまく見ていますhttp://codepen.io/anon/pen/MpLqPd

また、SVGを使用すると、サークルがはるかに優れています。

.outer{ 
    position:relative; 
    width:500px; 
    height:500px; 
    background:blue; 
    border-radius:50%; 
} 
.inner{ 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    transform: ; 
    width:100%; 
    height:100%; 
    background:#e3e3e3; 
    border-radius:50%; 
    border: 1px solid #e3e3e3; 
} 
.seeInfirefox{ 
    transform-origin: 50% 50%; 
    transform:translateX(-50%)translateY(-50%)rotate(90deg); 
}