"Clipped" 圆形底部 div 设置最小高度时

Question

我有这个加载程序（呈现 HTML）：

<div class="shuffle-loader">
    <span class="shuffle-loader__dot">
      ::after
    </span>
    <span class="shuffle-loader__dot">
      ::after
    </span>
    <span class="shuffle-loader__dot">
      ::after
    </span>
    <span class="shuffle-loader__dot">
      ::after
    </span>
</div>

/* important css snipet: */
.shuffle-loader {
  position: relative;
  display: block;
  height: 4rem;
  width: 4rem;
}
.shuffle-loader__dot::after {
  position: absolute;
  display: block;
  height: 1.5rem;
  width: 1.5rem;
  animation: shuffle 2.4s linear infinite;
  border-radius: 50%;
  content: " ";
}
.shuffle-loader__dot {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
}
@keyframes shuffle {
  0%,
  95%,
  100% {
    transform: translate(0, 0);
  }
  /* etc. */
}
/* Plus some .shuffle-loader__dot:nth-child(1)::after selectors for varied colors, etc. See codepen. */

效果很好。 但是，包装元素上 CSS 属性的某种组合似乎导致右下圆圈的一部分被“截断”:

.wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
}

如果我从 .wrapper 中删除这些属性中的任何一个，加载程序就可以很好地呈现（当然，除非它不在我想要的页面上的位置）。

这是一个 codepen reproduction 问题。

这似乎只发生在 Chromium 浏览器上。 这是怎么回事？这只是引擎错误吗？

更新 08/06/2021：视觉效果仅在动画处于活动状态时出现（即注释掉动画“修复”它）；我猜这是一个与动画相关的铬渲染错误。

Answer 1

找到了基于 this Chromium bug discussion 的解决方法：在动画的 0% 步上添加 rotate(0deg) 转换。

@keyframes shuffle {
    0%, 95%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
  /* etc. */

我不太明白是怎么做到的，但它确实有效。

"Clipped" 圆形底部 div 设置最小高度时

"Clipped" Bottom of Circular div When min-height Set

html

css

chromium