CSS剪辑导致闪烁的微调器？

Posted 2023-03-06

【中文标题】CSS剪辑导致闪烁的微调器？

【英文标题】：Flickering spinner caused by CSS clip?

【发布时间】：2016-02-28 05:07:18

【问题描述】：

Here's 的样子

.spinner 
       position: absolute;
       top: 35%;
       left: 50%;
       height: 80px;
       width: 80px;
       margin: -40px 0 0 -40px;
       clip: rect(0, 80px, 80px, 40px);
       -webkit-animation: loading 1.5s linear infinite;
       animation: loading 1.5s linear infinite;
       transform-origin: center;

        &:after 
        content:'';
        position: absolute;
        height: 80px;
        width: 80px;
        clip: rect(0, 80px, 80px, 40px);
        border-radius: 50%;
        -webkit-animation: loading2 1.5s ease-in-out infinite;
       animation: loading2 1.5s ease-in-out infinite;
        
     

@-webkit-keyframes loading 
  0% 
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  
  100% 
    -webkit-transform: rotate(220deg);
    transform: rotate(220deg);
  

@keyframes loading 
  0% 
    transform: rotate(0deg);
  
  100% 
    transform: rotate(220deg);
  


@-webkit-keyframes loading2 
  0% 
    box-shadow: inset #5FA3F3 0 0 0 8px;
    -webkit-transform: rotate(-140deg);
    transform: rotate(-140deg);
  
  50% 
    box-shadow: inset #2771C9 0 0 0 2px;
  
  100% 
    box-shadow: inset #5FA3F3 0 0 0 8px;
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
  

@keyframes loading2 
  0% 
    box-shadow: inset #5FA3F3 0 0 0 8px;
    -webkit-transform: rotate(-140deg);
    transform: rotate(-140deg);
  
  50% 
    box-shadow: inset #2771C9 0 0 0 2px;
  
  100% 
    box-shadow: inset #5FA3F3 0 0 0 8px;
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
  

在 Firefox（42.0 版）上，微调器有时会卡住，我相信这可能是因为剪切矩形在其过渡结束时动画和旋转的方式。我不确定如何解决这个问题，或者是否有更好的方法来实现这个微调器。

有什么想法吗？

【问题讨论】：

难道你不应该也为 mozilla 使用 vendor-prefix 吗？例如-moz-animation , -moz-transform

对我来说，它在 FF 和 Chrome 中都卡顿了。我想这与不断变化的 box-shadow 大小有关，它似乎没有被平滑/抗锯齿。

@Chris 您不需要为 mozilla 添加供应商前缀。我已经尝试为此添加它们，但没有任何区别。

@CedricReichenbach 不只适用于字体吗？

否；我的意思是，大小似乎在整数之间跳跃，即 2px -> 3px -> 4px...，而不是在其间插入值，例如 2.5px。也许this image（这是它应该做的，但不是）可以帮助您更好地理解。

【参考方案1】：

试试这个！将其应用于您看到闪烁的元素。

-webkit-transform-style: preserve-3d;

关于preserve-3d 的一点点： https://css-tricks.com/almanac/properties/t/transform-style/

更新

您提供的示例链接是ease infinite。 如果您要像您提供的代码一样使用linear infinite，我看不出有任何问题。

-webkit-animation: loading 1.5s linear infinite;

我尝试将其从线性修改为轻松，http://codepen.io/pksunkara/pen/gbejPv，这也导致结尾闪烁很少。最好的方法是固定为单色。

【讨论】：

以前试过这个，没有效果/：我也试过 -webkit-backface-visibility: hidden; -webkit 转换：比例（1）；但它什么也没改变。 :(

让我重写答案

【参考方案2】：

尝试为微调器添加z-index: 1。使用 bootstrap 4 微调器时，它对我有用。