html - 为什么只有当我在 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 示例就会在没有鼠标移动的情况下停止动画:

如果调整 codepen 的 firefox 窗口大小，您可以主动看到窗口尺寸太小时动画停止的效果。我没有在 firefox bugzilla 上看到具体的错误，但 iframe 中的动画有一些可能相关的错误。