Scaled container won't keep round shape (border-radius: 50%)?

Question

I have a simple round-shaped container:

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

When I try to scale its size with:

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

It doesn't look that round anymore. Seems like its border-radius gets a value equal to the original border radius in pixels multiplied by the scale value.

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

Any ideas how to fix it?

UPDATE: Seems like the problem only occurs in Chrome. Firefox shows a perfect circle.

Answer 1

Strange, but it works if you set width and height to 6px or any even number.

Looks like radius is calculated wrong in Chrome when it is an odd number.

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