スケーリングされたコンテナは丸い形状を保持しません（ボーダー半径：50％）？

Question

私はシンプルな丸型コンテナ持っている：それはもうそのラウンドを見ていない

.foo { 
    -webkit-transform: scale(10,10); 
      transform: scale(10,10); 
} 

：私は、そのサイズを縮小しようとすると

.foo { 
    width: 5px; 
    height: 5px; 
    background-color: green; 
    border-radius: 50%; 
} 

を。 border-radiusのように、元のボーダー半径にピクセル単位でスケール値を掛けた値が得られたようです。

https://jsfiddle.net/h70wsqrv/1/

任意のアイデアをどのようにそれを修正するには？

更新：この問題はChromeでのみ発生するようです。 Firefoxは完全な円を示しています。

Answer 1

奇妙ですが、幅と高さを6pxまたはに設定すると機能します。偶数はです。

奇数の場合、Chromeでは半径が正しく計算されていないようです。

.foo { 
 
    margin: 100px; 
 
    width: 6px; 
 
    height: 6px; 
 
    background-color: green; 
 
    border-radius: 50%; 
 
    -webkit-transform: scale(15, 15); 
 
    transform: scale(15, 15); 
 
}

<div class="foo"> 
 
</div>