Z-index doesn't work well in firefox

Question

Z-index doesn't work well in firefox

I created a simple CSS3 animation, but the problem is that the z-index doesn't work well in firefox, the green box should be stacked on top of the road, but in the firefox browser. So I would like to understand why this problem appears and what is the solution?

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>

Run code Hide result

+3

javascript jquery html css css3

MoHamed HaSsn 02 May '17 at 9:49

source to share

3 answers

Sam · Answer 1 · 2017-05-02T11:54:20+0000

Just place <div class="element">

after <div class="road-wrap">

in your code.

GibboK · Answer 2 · 2017-05-02T12:33:16+0000

You can find your script solution at the following link.

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

Basically you need to reorder your divs in HTML.

Notes: I tested this solution on FF 53.0 (32-bit) 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>

Kaiido · Answer 3 · 2017-05-02T15:00:53+0000

For a real solution, you should report it to the Mozilla bugzilla.

It's quite difficult to debug, but I tried to pause the animation as soon as I saw the effect, and obviously when the animation stopped, everything was fine on the screen ...

For those interested, here is a fiddle where I lost a few tens of minutes trying to capture the error (maybe a good btw game).

Now since I am assuming you are ready for a workaround, well ... I may have js. Since I think we have determined that the animation is an issue where I feel like the little panda is taking a nap in the middle of the render, we just need to tell him to never sleep.
And for this we can constantly ask for payment of ours .element

, simply by naming one of its properties offsetXXX

.

Beware, as the error only occurs sporadically on my machine, I can't say for sure that this workaround actually works 100% of the time. ... Please tell me in the comments if this didn't work for you.

// 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>

Run code Hide result

And like a violin .

Z-index doesn't work well in firefox

More articles: