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

quot;Clippedquot; Bottom of Circular div When min-height Set(设置最小高度时圆形div底部的剪裁(Q))

本文介绍了设置最小高度时圆形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. */

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

这篇关于设置最小高度时圆形div底部的剪裁(&Q)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:设置最小高度时圆形div底部的剪裁(&Q)

基础教程推荐