3

I created simple CSS3 animations but the problem that the z-index not work well in firefox, the green box must be stacked on top of the road but in the firefox browser, So I'd like to understand why this problem is 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>
MoHamed HaSsn
  • 555
  • 1
  • 6
  • 20
  • 1
    When I run that in Firefox, the green box is indeed over the road, just like in Chrome. *(I have **other** issues in Firefox, a lane marking that seems to randomly appear and disappear as the others travel over it, but not a problem with the green box.)* – T.J. Crowder May 02 '17 at 09:53
  • Thank you for your reply, no in firefox the green element is stacked under the road element !! – MoHamed HaSsn May 02 '17 at 09:57
  • 1
    @T.J.Crowder indeed, on Chrome, it works well. But on Firefox, sometimes the green is behind, sometimes over. – Zooly May 02 '17 at 10:01
  • MoHamedHaSsn & @Zooly: Again: **Using Firefox**, the green is not under, it's on top (for me). I'm using Firefox 53 64-bit on Linux. – T.J. Crowder May 02 '17 at 10:03
  • yeah sometimes is over and sometime is under why? – MoHamed HaSsn May 02 '17 at 10:04
  • @T.J.Crowder see http://i.imgur.com/UvbdKdT.png ? It seems random (Firefox 52.0.2 32 Bits on W10) – Zooly May 02 '17 at 10:05
  • @Zooly: Or it was a bug they fixed in v53. *Edit:* Now this is weird: I just went back to my Firefox window, where previously the green was on top (I left it running), and it was **under** the road when I went back! – T.J. Crowder May 02 '17 at 10:06
  • I can upload a record screen to see this problem, Note I use firefox version 53 – MoHamed HaSsn May 02 '17 at 10:07
  • 1
    http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d – Rohith K P May 02 '17 at 10:08

3 Answers3

0

Just place <div class="element"> after <div class="road-wrap"> in the code.

Ruslan
  • 1,293
  • 17
  • 28
0

You can find your script fix at the following link.

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

Basically you need to change the order of your divs in the 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>
GibboK
  • 71,848
  • 143
  • 435
  • 658
0

For a real solution, you should probably report this to Mozilla's bugzilla.

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

For the ones interested, here is the fiddle where I lost a few dozens of minutes trying to capture the bug (could be a good game b.t.w).

Now, since I guess you are willing for a workaround, well... I may have a js one.
Since I think we identified that the animation is the problem, where I feel the little panda takes a nap in the middle of the rendering, we just have to tell it to never sleep.
And to do so, we can constantly request for a reflow of our .element, by simply calling one of its offsetXXX properties.

Beware, since the bug occurs only sporadically on my machine, I can't tell for sure that this workaround actually works 100% of the time. So be kind, tell me in comments if it failed 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>

And as a fiddle.

Kaiido
  • 123,334
  • 13
  • 219
  • 285