为什么只有在iframe上移动鼠标时CSS动画才平滑？

Question

我遇到与帖子Why CSS animation go smooth only if i am moving mouse pointer?相同的问题，但仅适用于stackoverflow片段（codepen和jsfiddle正常工作）。

存在问题：

• Xubuntu 18.04上的Firefox 67.0.4
• Windows 10上的Firefox 68.0.1

我在以下方面没有问题

• IE11和Edge（根本不起作用：P）
• Windows 10上的Chrome 75

---

现在是演示的时间：

• 这是stackoverflow片段（如果您无法重现该错误，也做了video ）：

  div{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    border: 1px solid black;
  }
  
  span{
    display: inline-block;
    position: fixed;
  }
  
  span[data-id]::before{
    opacity: 0;
    line-height: 1;
    font-size: 50px;
    content: attr(data-id);
    background-position: center;
    animation: fade 4s linear calc(1s * var(--data-x)) infinite;
  
  }
  
  @keyframes fade{
    25%{
      opacity: 1;
    }
    50%{
      opacity: 0;
    }
  }
  
   

  <div>
    <span data-id="1" style="--data-x:0"></span>
    <span data-id="2" style="--data-x:1"></span>
    <span data-id="3" style="--data-x:2"></span>
    <span data-id="4" style="--data-x:3"></span>
  </div>
  
   

• 这是jsfiddle链接。

• 这是codepen链接。

---

我的问题是：
您能解释一下为什么使用特定浏览器浏览特定代码段时动画执行时出现问题吗？ （您是否能够重现这种奇怪的行为？）

Answer 1

Firefox从小型iframe中完全删除了CSS动画优先级（在Ubuntu中的firefox 71上进行了测试）。

现在，codepen示例在正方形时使用了超过一半的可用屏幕，并正确设置了动画效果：

但是，只要iframe的大小小于外页大小的一半，codepen示例就会停止动画而没有鼠标移动：

如果您为代码笔调整firefox窗口的大小，则一旦窗口大小太小，您就可以主动看到动画停止的效果。我没有在firefox bugzilla上看到具体的错误，但是iframe中的动画周围可能存在一些错误。