Chrome中的CSS邊界半徑/過渡問題

Question

我正在嘗試創建一個Material Design風格的界面，允許用戶將顏色滴入孔中。 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斌

編輯：剛剛在Safari中進行了測試，它表現出相同的平面丑陋性，並具有額外的好處，即它現在在過渡期間將尺寸更改了幾個像素。

Answer 1

現在在這里回答問題： li元素背景不遵循變換的邊界半徑

將父級的z-index設置為1，子級的z-index設置為零后，瀏覽器將遵循邊界半徑。

.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