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

【问题标题】：CSS border-radius/transition issues in ChromeChrome 中的 CSS 边框半径/过渡问题
【发布时间】：2016-04-28 02:31:37
【问题描述】：

我正在尝试创建一个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 中它会导致父元素在过渡期间短暂地具有平坦的侧面。这不太理想，并且抵消了我最初试图通过过渡引入的魔力。

我的问题分为三个部分：

这是 Chrome/WebKit 错误吗？
有什么办法可以补救/隐藏效果吗？
我应该使用 WebGL 重做它吗？

JS Bin

编辑：刚刚在 Safari 中进行了测试，它表现出相同的扁平侧丑陋，但额外的好处是它现在在过渡期间会改变几个像素的大小。

【问题讨论】：

标签： javascript css webkit css-transitions

【解决方案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

【讨论】：