z-index плохо работает в firefox

Я создал простую анимацию CSS3, но проблема в том, что z-индекс плохо работает в 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>


javascript html jquery css
person MoHamed HaSsn    schedule 02.05.2017    source источник
comment
Когда я запускаю это в Firefox, зеленая рамка действительно находится над дорогой, как и в Chrome. (У меня есть другие проблемы в Firefox, разметка полосы движения, которая появляется и исчезает случайным образом, когда другие проезжают по ней, но не проблема с зеленым прямоугольником.)   -  person T.J. Crowder    schedule 02.05.2017
comment
Спасибо за ваш ответ, нет в firefox зеленый элемент расположен под элементом дороги!!   -  person MoHamed HaSsn    schedule 02.05.2017
comment
@T.J.Crowder действительно, в Chrome это работает хорошо. Но в Firefox иногда зеленый цвет отстает, иногда заканчивается.   -  person Zooly    schedule 02.05.2017
comment
MoHamedHaSsn и @Zooly: Еще раз: используя Firefox, зеленый цвет находится не внизу, а сверху (для меня). Я использую 64-разрядную версию Firefox 53 в Linux.   -  person T.J. Crowder    schedule 02.05.2017
comment
да иногда заканчивается, а иногда находится под почему?   -  person MoHamed HaSsn    schedule 02.05.2017
comment
@T.J.Crowder см. i.imgur.com/UvbdKdT.png? Кажется случайным (Firefox 52.0.2 32 бита на W10)   -  person Zooly    schedule 02.05.2017
comment
@Zooly: Или это была ошибка, которую они исправили в v53. Редактировать: Теперь это странно: я просто вернулся к окну Firefox, где раньше зеленый был сверху (я оставил его работающим), а оно было под дорогой когда я вернулся!   -  person T.J. Crowder    schedule 02.05.2017
comment
Я могу загрузить экран записи, чтобы увидеть эту проблему. Обратите внимание, что я использую Firefox версии 53.   -  person MoHamed HaSsn    schedule 02.05.2017
comment
stackoverflow.com/ вопросы/5472802/   -  person Rohith K P    schedule 02.05.2017

Ответы (3)


arrow_upward
0
arrow_downward

Просто поместите <div class="element"> после <div class="road-wrap"> в код.

person Sam    schedule 02.05.2017

arrow_upward
0
arrow_downward

Вы можете найти исправление скрипта по следующей ссылке.

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>
person GibboK    schedule 02.05.2017
comment
Благодаря вашей скрипке я наконец-то могу воспроизвести свой FF54 на Mac ;-) - person Kaiido; 02.05.2017

arrow_upward
0
arrow_downward

Для реального решения вам, вероятно, следует сообщить об этом в багзиллу Mozilla.

Это довольно сложно отладить, но я попытался приостановить анимацию, как только увидел эффект, и, очевидно, когда анимация остановилась, на экране все вернулось в норму...

Для тех, кому интересно, вот скрипка, где я потерял несколько десятков минут, пытаясь поймать ошибку ( между прочим, может быть хорошей игрой).

Теперь, поскольку я предполагаю, что вы готовы к обходному пути, что ж... Я могу использовать js.
Поскольку я думаю, что мы определили, что проблема заключается в анимации, я чувствую, что маленькая панда дремлет посередине. рендеринга, нам просто нужно сказать ему никогда не спать.
И для этого мы можем постоянно запрашивать перекомпоновку нашего .element, просто вызывая одно из его свойств offsetXXX.

Остерегайтесь, так как ошибка возникает на моем компьютере только спорадически, я не могу с уверенностью сказать, что этот обходной путь действительно работает в 100% случаев. Так что будьте любезны, сообщите мне в комментариях, если он вам не помог. .

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

И как скрипка.

person Kaiido    schedule 02.05.2017