设置最小高度时圆形div底部的剪裁(&Q)

问题描述

我有这个加载器(呈现的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属性组合似乎会导致右下角圆圈的一部分获得"；Clip&Quot；：

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

如果我从.wrapper中删除这些属性中的任何一个，则加载程序呈现得很好(当然，除非它不是我希望它出现在页面上的位置)。

以下是该问题的codepen reproduction。

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

更新08/06/2021：只有在动画处于活动状态(即注释掉动画)时才会显示视觉效果；我猜这可能是与动画相关的铬渲染错误。

推荐答案

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

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

我不太了解它是如何工作的，但它是有效的。