CSS border-radius/transition issues in Chrome

Question

I'm trying to create a Material Design-esque interface that allows the user to drop colors into wells. The DOM is structured as follows:

<div class="clickable well">
  <div id="well-color"></div>
  <div class="well-shadow"></div>
</div>

I've got the following styles defined:

.well {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  position: relative;
  overflow: hidden;
}
.well-shadow {
  position: absolute;
  top: -1px; bottom: -1px; left: -1px; right: -1px;
  box-shadow: 0px 2px 6px inset;
  pointer-events: none;
  border-radius: 50%;
}
.well.clickable {
  cursor: pointer;
}
#well-color {
  pointer-events: none;
  position: absolute;
  width: 30px;
  height: 30px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(1);
  background-color: white;
  border-radius: 50%;
  box-shadow: 0px 0px 1px 3px white;
}
#well-color.enter {
  transform: translate(-50%, -50%) scale(0);
}
#well-color.entering {
  transform: translate(-50%, -50%) scale(1);
  transition: transform 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

I would expect the transitions to just work; however, it seems that in Chrome it causes the parent element to briefly have flat sides during the transition. This is less than ideal and counteracts the magic I was trying to introduce in the first place with the transitions.

My question has 3 parts:

1. Is this a Chrome/WebKit bug?
2. Is there something I can do to remedy it/hide the effects?
3. Should I just redo it using WebGL?

JS Bin

Edit: Just tested in Safari, and it exhibits the same flat-sides ugliness with the added bonus that it now changes size by a couple of pixels during the transition.

Answer 1

Question is now answered here: li element backgrounds not obeying the border radius on transformations

After setting a z-index to 1 on the parent and zero on the children, the browser then respects the border radius.

.parent {
  display:block; 
  position:relative;
  z-index:1; }

.child {
  z-index:0;
  transition: .3s ease-out; }

.active.child {  
  transform: translate(-50px,0); }  

Here is a similar working example with border radius: https://codepen.io/btn-ninja/pen/vJvQEE