z-index 在 Firefox 中无法正常工作

Question

我创建了简单的CSS3动画，但是z-index在firefox中不能正常工作的问题，绿色框必须堆叠在道路顶部但在firefox浏览器中，所以我想了解为什么会出现这个问题出现了，解决办法是什么？

body{
	margin:0;
	color:#444;
	font:300 18px/18px Roboto, sans-serif;
    text-align:center;
}
.element {
    width: 320px;
    height:100px;
    position: absolute;
    z-index: 50;
    left: 50%;
    margin-left:-160px;
    top: 50%;
    background-color:#00fb69;
             
}
@-moz-keyframes animation {
    0% {
        transform:scale(.95,.95) translateY(0px);
    }

    100% {
        transform: scale(.10,.10) translateY(-800px);
    }
}

@keyframes animation {
    0% {
        transform:scale(.95,.95) translateY(0px);
    }

    100% {
        transform: scale(.10,.10) translateY(-800px);
    }
}
.road-wrap{
    -webkit-perspective:160px;
    perspective:160px;
}
.road-wrap .road{
    margin-top:-360px;
    -webkit-transform:rotateX(80deg);
    transform:rotateX(80deg);
}
.road-wrap .lane-wrap{
    -webkit-animation:steer 4s linear infinite;
    animation:steer 4s linear infinite;
    position:relative;
    z-index:-1;
}
.road-wrap .lane{
	width:25px;
	margin:auto;
}
.road-wrap .lane>div{
	width:100%;
	margin:auto;
	margin-top:30px;
	margin-bottom:30px;
    position:relative;
	background-color:#444;
	-webkit-animation:lane 10s linear reverse infinite;
	animation:lane 10s linear reverse infinite;
}
.road-wrap .lane>div:nth-child(1){height:15px}
.road-wrap .lane>div:nth-child(2){height:20px}
.road-wrap .lane>div:nth-child(3){height:30px}
.road-wrap .lane>div:nth-child(4){height:50px}
.road-wrap .lane>div:nth-child(5){height:40px}
.road-wrap .lane>div:nth-child(6){height:50px}
.road-wrap .lane>div:nth-child(7){height:40px}
.road-wrap .lane>div:nth-child(8){height:50px}
.road-wrap .lane>div:nth-child(9){height:30px}
.road-wrap .lane>div:nth-child(10){height:20px}
.road-wrap .lane>div:nth-child(11){height:15px}
@-webkit-keyframes lane{
	0%{
        -webkit-transform:translateY(320px);
        transform:translateY(320px);
	}
	100%{
        -webkit-transform:translateY(-160px);
        transform:translateY(-160px);
	}
}
@keyframes lane{
	0%{
        -webkit-transform:translateY(320px) scale(.60,.60);
        transform:translateY(320px) scale(.60,.60);
	}
	100%{
        -webkit-transform:translateY(-160px) scale(.80,.80);
        transform:translateY(-160px) scale(.80,.80);
	}
}

@media(max-width:768px) {
.element{
    width:150px;
    margin-left:-75px;
}
}
@media (min-width: 768px){
    .element{
    width:250px;
    margin-left:-125px;
}
}

<div class="loading-screen">
    <div class="element">
    </div>
    <div class="road-wrap">
        <div class="road">
            <div class="lane-wrap">
                <div class="lane">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

对于真正的解决方案，您可能应该将此报告给 Mozilla 的 bugzilla。

---

调试起来相当麻烦，但我一看到效果就尝试暂停动画，显然，当动画停止时，屏幕上的一切都恢复了正常......

对于感兴趣的人，here is the fiddle 我花了几十分钟试图捕捉错误（顺便说一句，这可能是个好游戏）。

现在，既然我猜你愿意解决问题，那么……我可能有一个 js 的。
由于我认为我们确定动画是问题所在，我觉得小熊猫在渲染中间打盹，我们只需要告诉它永远不要睡觉。
为此，我们可以通过简单地调用 offsetXXX 属性之一来不断请求重排 .element。

请注意，由于该错误仅偶尔出现在我的机器上，我无法确定此解决方法实际上 100% 有效。 所以请客气，如果它在 cmets 中告诉我你失败了。

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

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

body{
	margin:0;
	color:#444;
	font:300 18px/18px Roboto, sans-serif;
    text-align:center;
}
.element {
    width: 320px;
    height:100px;
    position: absolute;
    z-index: 50;
    left: 50%;
    margin-left:-160px;
    top: 50%;
    background-color:#00fb69;
             
}
@-moz-keyframes animation {
    0% {
        transform:scale(.95,.95) translateY(0px);
    }

    100% {
        transform: scale(.10,.10) translateY(-800px);
    }
}

@keyframes animation {
    0% {
        transform:scale(.95,.95) translateY(0px);
    }

    100% {
        transform: scale(.10,.10) translateY(-800px);
    }
}
.road-wrap{
    -webkit-perspective:160px;
    perspective:160px;
}
.road-wrap .road{
    margin-top:-360px;
    -webkit-transform:rotateX(80deg);
    transform:rotateX(80deg);
}
.road-wrap .lane-wrap{
    -webkit-animation:steer 4s linear infinite;
    animation:steer 4s linear infinite;
    position:relative;
    z-index:-1;
}
.road-wrap .lane{
	width:25px;
	margin:auto;
}
.road-wrap .lane>div{
	width:100%;
	margin:auto;
	margin-top:30px;
	margin-bottom:30px;
    position:relative;
	background-color:#444;
	-webkit-animation:lane 10s linear reverse infinite;
	animation:lane 10s linear reverse infinite;
}
.road-wrap .lane>div:nth-child(1){height:15px}
.road-wrap .lane>div:nth-child(2){height:20px}
.road-wrap .lane>div:nth-child(3){height:30px}
.road-wrap .lane>div:nth-child(4){height:50px}
.road-wrap .lane>div:nth-child(5){height:40px}
.road-wrap .lane>div:nth-child(6){height:50px}
.road-wrap .lane>div:nth-child(7){height:40px}
.road-wrap .lane>div:nth-child(8){height:50px}
.road-wrap .lane>div:nth-child(9){height:30px}
.road-wrap .lane>div:nth-child(10){height:20px}
.road-wrap .lane>div:nth-child(11){height:15px}
@-webkit-keyframes lane{
	0%{
        -webkit-transform:translateY(320px);
        transform:translateY(320px);
	}
	100%{
        -webkit-transform:translateY(-160px);
        transform:translateY(-160px);
	}
}
@keyframes lane{
	0%{
        -webkit-transform:translateY(320px) scale(.60,.60);
        transform:translateY(320px) scale(.60,.60);
	}
	100%{
        -webkit-transform:translateY(-160px) scale(.80,.80);
        transform:translateY(-160px) scale(.80,.80);
	}
}

@media(max-width:768px) {
.element{
    width:150px;
    margin-left:-75px;
}
}
@media (min-width: 768px){
    .element{
    width:250px;
    margin-left:-125px;
}
}

<div class="loading-screen">
    <div class="element">
    </div>
    <div class="road-wrap">
        <div class="road">
            <div class="lane-wrap">
                <div class="lane">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</div>

作为a fiddle。

Answer 2

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

https://jsfiddle.net/w42fqb5e/1/

基本上你需要改变你的 div 在 HTML 中的顺序。

注意：我在 FF 53.0（32 位）WIN 上测试了这个解决方案。

<div class="loading-screen">
    <div class="road-wrap">
        <div class="road">
            <div class="lane-wrap">
                <div class="lane">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
    <div class="element">
    </div>
</div>

Answer 3

只需将<div class="element"> 放在代码中的<div class="road-wrap"> 之后即可。