Chrome中的CSS border-radius / transition问题

Question

我正在尝试创建一个Material Design - esque界面，允许用户将颜色拖入井中。 DOM的结构如下：

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

我定义了以下样式：

.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);
}

我希望过渡到正常;然而，似乎在Chrome中它会导致父元素在过渡期间短暂地具有平坦的边。这不太理想，并且抵消了我试图在过渡时首先引入的魔力。

我的问题有3个部分：

1. 这是Chrome / WebKit错误吗？
2. 我能做些什么来补救/隐藏效果吗？
3. 我应该使用WebGL重做它吗？

JS Bin

编辑刚刚在Safari中测试过，它表现出相同的平面丑陋，并且在转换过程中它现在会改变大小几个像素。

Answer 1

现在回答问题： li element backgrounds not obeying the border radius on transformations

在父项上将z-index设置为1并在子项上设置为零后，浏览器会考虑边框半径。

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

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

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

以下是边界半径的类似工作示例：   https://codepen.io/btn-ninja/pen/vJvQEE