Chrome中的CSS border-radius/transition問題

Question

我正在嘗試創建一個Material Design -esque界面，允許用戶將顏色放入井中。

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

我有以下樣式定義：在DOM結構如下

.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