Question

我在构建循环进度指示器时遇到了奇怪的行为。在试图找出错误之后，我没有提供线索，为什么在视网膜显示器上的Chrome中没有渲染边界半径。

我有一个div，它会呈现一个圆圈和一些绝对定位的内部内容：

.circle {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

.inner {
  position: absolute;
  left:0;
  top:0;
  width: 100px;
  height: 100px;
  background: red;
}

当然这很好。但是，通过添加一些周围的div，它开始显示一个矩形而不是一个圆圈。

<div style="height: 300px"> <!-- to render scrollbar -->
  <div style="position: fixed"></div>
  <div style="position: relative"></div>
  <div class="circle">
    <div class="inner"></div>
  </div>
</div>

孤立的问题：https://codepen.io/sanderdejong/pen/qmrXjq

将矩形再次变成圆圈的事情：

降低顶部div的高度，使其不会呈现滚动条
滚动页面以使矩形部分超出范围
将浏览器窗口拖动到非视网膜监视器
从兄弟div

我不确定如何进一步隔离这个问题，如果可以解释为什么会发生这种情况。我也尝试过Firefox和Safari，但都能正常工作。

在视网膜显示器上Chrome中的边框半径不呈现

0 个答案: