Firefox中的CSS动画不流畅

我有一个简单的装载指示器

正文{
背景：#1e263e；
}
.load{
显示器：flex；
位置：固定；
对齐项目：居中；
证明内容：中心；
身高：100%；
宽度：100%；
}
.装载机{
边框：12px实心#F3；
边框顶部：12px实心#555！重要；
边界半径：50%；
宽度：96px；
高度：96px；
动画：sp旋转2s线性无限；
}
@关键帧sp旋转{
0% {
变换：旋转（0度）
}
到{
变换：旋转（1圈）
}
}

---

这看起来像是一个Firefox bug

如果您在

位置使用动画：修复了
iframe
中的
容器（如jsfiddle或类似snippet），那么它在Firefox中会运行不稳定。在
iframe
之外，它工作平稳

移除
位置：已修复
在
iframe
中修复它：


正文{
背景：#1e263e；
}
.装载{
显示器：flex；
/*位置：固定*/
对齐项目：居中；
证明内容：中心；
身高：100%；
宽度：100%；
}
.装载机{
边框：12px实心#F3；
边框顶部：12px实心#555！重要；
边界半径：50%；
宽度：96px；
高度：96px；
动画：sp旋转2s线性无限；
}
@关键帧sp旋转{
0% {
变换：旋转（0度）
}
到{
变换：旋转（1圈）
}
}

您是否在JSFIDLE之外尝试过此功能？我可以确认JSFIDLE中的慢行为，也在codepen上尝试过——这是一样的。尝试使用前缀并将更改-相同。但在本地运行它并没有显示任何矮胖行为的迹象。我想这与firefox中iframe中运行的动画有关？您是否尝试了
360deg
而不是
1turn
？看起来像是JSFIDLE问题。不过很奇怪。在输出区域中不断移动鼠标指针，过渡将变为平滑。