溢出：当 Chrome 中存在滚动条时，隐藏和边框半径不起作用

Question

我正在尝试制作一个进度条。 这是代码。

.outer {
  overflow: auto;
  width: 500px;
  height: 300px;
}
.inner {
  /*   Uncommmet next line, and the border-radius will disappear. */
  /*   height: 500px; */
}
.progress {
  width: 100%;
  border-radius: 40px;
  height: 80px;
  background-color: #f5f7fa;
  overflow: hidden;
}
.progress-basic {
  background-color: #3890ff;
  height: 100%;
  width: 100%;
  /*  Removing the opacity can fix this bug. But why? */
  opacity: 0.8;
}

<div class="outer">
  <div class="inner">
    <div class="progress">
      <div class="progress-basic">
      </div>
    </div>
  </div>
</div>

div.progress 有 overflow:hidden 和 border-radius:40px。所以div.progress-basic 应该显示为好像它有border-radius。

到目前为止一切正常。但是当滚动条显示在它们的父元素中时（在这种情况下是div.outer），border-radius 就消失了。

我的 Chrome 版本是 52.0.2743.116（64 位）。我也在Safari和Firefox中测试过这个bug，没有问题。

我为这个错误找到了一个奇怪的解决方案。如果我删除 .progress-basic 中的不透明度，一切都会按预期工作。但我不知道为什么，我真的需要不透明度。

这是一个显示此错误的代码笔。 http://codepen.io/tanbowensg/pen/akZPEb

Answer 1

border-radius 仍然被应用到父.progress，但内部.progress-basic 显示在它上面。由于不透明度设置的某些原因，它认为它需要在其父级的边界半径之外进行渲染（它填充了整个矩形区域）。

查看此代码笔：http://codepen.io/anon/pen/vXBYRo

我更改了.progress 的背景颜色，以便您可以看到它实际上就在下面。我发现的唯一解决方法是给.progress-basic 与其父级相同的边界半径。您可以取消注释border-radius: inherit;，以便内部<div> 始终获取父边框半径。