为什么只有当我在 iframe 上移动鼠标时我的 CSS 动画才流畅？

Question

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

问题出现在：

Xubuntu 18.04 上的 Firefox 67.0.4
Windows10

我没遇到问题：

IE11 和 Edge（根本不工作 :P）
Chrome 75 Windows 10

现在是演示时间：

这是 Whosebug 片段（还制作了一个 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 link.
这里是codepenlink.

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

Answer 1

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

现在，codepen 示例在正方形时使用了一半以上的可用屏幕，并且动画正确：

但是，一旦 iframe 的大小小于外部页面大小的一半，codepen 示例就会在没有鼠标移动的情况下停止动画：

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

为什么只有当我在 iframe 上移动鼠标时我的 CSS 动画才流畅？

Why my CSS animation is smooth only when I move my mouse on the iframe?

html

css

css-animations

css-variables