Javascript z-index在firefox中不起作用

我创建了简单的CSS3动画，但问题是z索引在firefox中无法正常工作，绿色框必须堆叠在道路顶部，但在firefox浏览器中，因此我想了解为什么会出现此问题，以及解决方案是什么

正文{
保证金：0；
颜色：#444；
字体：300 18px/18px Roboto，无衬线；
文本对齐：居中；
}
.元素{
宽度：320px；
高度：100px；
位置：绝对位置；
z指数：50；
左：50%；
左边距：-160px；
最高：50%；
背景色：#00fb69；
}
@-moz关键帧动画{
0% {
变换：缩放（.95，.95）平移Y（0px）；
}
100% {
变换：缩放（.10，.10）translateY（-800px）；
}
}
@关键帧动画{
0% {
变换：缩放（.95，.95）平移Y（0px）；
}
100% {
变换：缩放（.10，.10）translateY（-800px）；
}
}
.道路包装{
-webkit透视图：160px；
透视图：160px；
}
.道路包装{
利润上限：-360px；
-webkit变换：rotateX（80度）；
变换：rotateX（80度）；
}
.道路包裹.车道包裹{
-webkit动画：线性无限；
动画：线性无限；
位置：相对位置；
z指数：-1；
}
1.道路环绕线{
宽度：25px；
保证金：自动；
}
.道路环绕.车道>分区{
宽度：100%；
保证金：自动；
边缘顶部：30px；
边缘底部：30px；
位置：相对位置；
背景色：#444；
-webkit动画：lane 10s线性反转无限；
动画：车道10s线性反向无限；
}
.road wrap.lane>分区：第n个子（1）{高度：15px}
.road wrap.lane>分区：第n个孩子（2）{高度：20px}
.road wrap.lane>分区：第n个孩子（3）{高度：30px}
.road wrap.lane>分区：第n个孩子（4）{身高：50px}
.road wrap.lane>分区：第n个子（5）{高度：40px}
.road wrap.lane>分区：第n个孩子（6）{身高：50px}
.road wrap.lane>分区：第n个孩子（7）{高度：40px}
.road wrap.lane>分区：第n个孩子（8）{身高：50px}
.road wrap.lane>分区：第n个孩子（9）{身高：30px}
.road wrap.lane>分区：第n个孩子（10）{身高：20px}
.road wrap.lane>分区：第n个孩子（11）{身高：15px}
@-webkit关键帧通道{
0%{
-webkit转换：translateY（320px）；
变换：translateY（320px）；
}
100%{
-webkit转换：translateY（-160px）；
转换：translateY（-160px）；
}
}
@关键帧车道{
0%{
-webkit变换：translateY（320px）比例（.60，.60）；
变换：translateY（320px）比例（.60，.60）；
}
100%{
-webkit变换：translateY（-160px）比例（.80，.80）；
变换：translateY（-160px）比例（.80，.80）；
}
}
@介质（最大宽度：768px）{
.元素{
宽度：150px；
左边距：-75px；
}
}
@介质（最小宽度：768px）{
.元素{
宽度：250px；
左边距：-125px；
}
}

---

只需将

放在代码中的

之后。

您可以在以下链接找到脚本修复程序

基本上，您需要更改HTML中div的顺序

注意：我在FF53.0（32位）WIN上测试了此解决方案

---

对于真正的解决方案，您可能应该向Mozilla的bugzilla报告这一点

---

调试起来相当困难，但我一看到效果就试图暂停动画，很明显，当动画停止时，屏幕上的一切都恢复正常

对于那些感兴趣的人来说，我花了几十分钟试图捕捉这个bug（可能是一个不错的b.t.w游戏）

现在，既然我猜你愿意找个解决办法，那么。。。我可能要一个js的。
因为我认为我们确定了动画是个问题，在这里我觉得小熊猫在渲染过程中小睡一会儿，我们只需要告诉它不要睡觉。 要做到这一点，我们可以通过调用

offsetXXX

属性之一，不断请求我们的

.element

的回流

请注意，由于该错误只在我的机器上偶尔出现，因此我无法确定该解决方法是否在100%的时间内都有效。因此，如果您失败，请在评论中告诉我

// forces a reflow at every frame
const element = document.querySelector('.element');
const anim = t => {
  element.offsetLeft;
  requestAnimationFrame(anim)
}
anim();

//在每帧强制回流
常量元素=document.querySelector（'.element'）；
常数anim=t=>{
元素。offsetLeft；
requestAnimationFrame（动画）
}
动漫（）
正文{
保证金：0；
颜色：#444；
字体：300 18px/18px Roboto，无衬线；
文本对齐：居中；
}
.元素{
宽度：320px；
高度：100px；
位置：绝对位置；
z指数：50；
左：50%；
左边距：-160px；
最高：50%；
背景色：#00fb69；
}
@-moz关键帧动画{
0% {
变换：缩放（.95，.95）平移Y（0px）；
}
100% {
变换：缩放（.10，.10）translateY（-800px）；
}
}
@关键帧动画{
0% {
变换：缩放（.95，.95）平移Y（0px）；
}
100% {
变换：缩放（.10，.10）translateY（-800px）；
}
}
.道路包装{
-webkit透视图：160px；
透视图：160px；
}
.道路包装{
利润上限：-360px；
-webkit变换：rotateX（80度）；
变换：rotateX（80度）；
}
.道路包裹.车道包裹{
-webkit动画：线性无限；
动画：线性无限；
位置：相对位置；
z指数：-1；
}
1.道路环绕线{
宽度：25px；
保证金：自动；
}
.道路环绕.车道>分区{
宽度：100%；
保证金：自动；
边缘顶部：30px；
边缘底部：30px；
位置：相对位置；
背景色：#444；
-网络工具包动画
// forces a reflow at every frame
const element = document.querySelector('.element');
const anim = t => {
  element.offsetLeft;
  requestAnimationFrame(anim)
}
anim();