Javascript 边缘上的CSS动画转换错误

我在edge上有一个奇怪的bug/lag，它看起来像是在我添加了position之后出现的：固定到正在设置动画的div，它在每个浏览器上都可以正常工作，但edge除外（不确定safari tho）

document.addEventListener（'DOMContentLoaded'，_=>{
const animBoxOne=document.querySelector（'.animation-box-1'）
常量animbox2=document.querySelector（'.animation-box-2'）
animBoxOne.classList.add（'animation-1'）
设置超时（（）=>{
animBoxOne.classList.add（'hidden'）
}, 6000);
})

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
溢出x：隐藏；
}
.标志盒{
显示：flex！重要；
对齐项目：居中；
证明内容：中心；
}
.标志{
宽度：50%；
}
.animation-box-1{
最大高度：100vw；
宽度：900%；
位置：固定；
}
.动画-1{
动画名称：introAnimation；
动画持续时间：6s；
动画填充模式：正向；
过渡：不透明度2s；
}
.动画-box-2{
最大高度：100vw；
宽度：900%；
}
.广场{
宽度：100vw；
高度：100vh；
显示：块；
浮动：左；
}
.square-1{
背景：黑色；
}
.square-2{
背景#9F7324；
}
.square-3{
背景：白色；
}
.square-4{
背景：黑色；
}
.隐藏{
不透明度：0；
}
@关键帧动画{
40% {
转换：translateX（0）
}
55% {
变换：translateX（-100vw）
}
70% {
转换：translateX（-200vw）
}
85% {
变换：translateX（-300vw）；
}
100% {
变换：translateX（-300vw）；
}
}
.clearfix:：之后{
内容：''；
明确：两者皆有；
}

添加

位置：固定；z指数：-1

到

.animation-box-2

关于一个人为什么会这样做的一些解释将完成这个答案。我不愿意把我不懂的东西扔进我的应用程序。