Il contenitore in scala non mantiene la forma arrotondata (raggio-limite: 50%)?

Question

Ho un semplice contenitore di forma circolare:

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

Quando provo a scalare la sua dimensione con:

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

non sembra più quel round. Sembra che il raggio del bordo abbia un valore pari al raggio del bordo originale in pixel moltiplicato per il valore della scala.

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

Delle idee come risolvere il problema?

AGGIORNAMENTO: sembra che il problema si verifica solo in Chrome. Firefox mostra un cerchio perfetto.

Answer 1

Strano, ma funziona se si imposta larghezza e altezza su 6px o un numero pari.

Sembra che il raggio sia stato calcolato in modo errato in Chrome quando si tratta di un numero dispari.

.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>