Javascript Chrome中的CSS边框半径/过渡问题

我正在尝试创建一个风格独特的界面，允许用户将颜色放入井中。DOM的结构如下所示：

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

我希望这种转变能起作用；然而，在Chrome中，它似乎会导致父元素在过渡期间短暂地具有平面。这不太理想，并且抵消了我最初试图通过过渡引入的魔力

我的问题分为三个部分：

这是Chrome/WebKit的bug吗

我能做些什么来补救/隐藏效果吗

我应该用WebGL重做吗

---

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

问题现在在这里得到了回答：

将父对象的z索引设置为1，子对象的z索引设置为0后，浏览器将考虑边界半径

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

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

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

下面是一个具有边界半径的类似工作示例：

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

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

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