почему несколько div с :: before и :: after имеют одно фоновое изображение в chrome, тогда как Firefox показывает несколько фоновых изображений? - PullRequest
Новая
       77

почему несколько div с :: before и :: after имеют одно фоновое изображение в chrome, тогда как Firefox показывает несколько фоновых изображений?

1 голос
/ 12 марта 2020

У меня хорошо работает код в chrome, но в Firefox он работает иначе. Здесь я использую множественные div с псевдоэлементом :: after и :: before , которые принимают фоновое изображение как одно (многократное div ≡ одно фоновое изображение) для всех элементов div во время работы в chrome веб-браузер.
Но в Firefox отдельные элементы div принимают каждое фоновое изображение (многие div - многие фоновые изображения). Итак, как решить эту проблему для Firefox веб-браузера?

Пример кода Html и css, который я использую: 

  $('.container div').mouseover(function(){
           $(this).addClass('flip')
       })
body{
    margin: 0;
    padding: 0;
}
.container{
    width: 100%;
    height: 100vh;
    background-size: cover;
    overflow: hidden; 
    background: green;
    font-size: 0;
}
.container div{
    position: relative;
    display: block;
    float: left;
    width: 20%;
    height: 20vh;
    box-sizing: border-box;
}
.container div:hover{
    z-index: 10000;
}
.container div::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://wallpaperplay.com/walls/full/2/e/6/205615.jpg);
    background-attachment: fixed;
    background-size: cover;
    transform-style: preserve-3d;
    transform-origin: top;
    transform: perspective(1000px) rotateX(0deg) translateY(0);
    transition: 0.5s linear;
    padding: 1px;
}
.container div.flip::before{
    transform: perspective(1000px) rotateX(90deg) translateY(-50%);
}
.container div::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://wallpaperhd.wiki/wp-content/uploads/laptop-wallpapers-s26hfq.jpg);
    background-attachment: fixed;
    background-size: cover;
    transform-style: preserve-3d;
    transform-origin: bottom;
    transform: perspective(1000px) rotateX(-90deg) translateY(50%);
    transition: 0.5s linear;
    padding: 1px;
}
.container div.flip::after{
    transform: perspective(1000px) rotateX(0deg) translateY(0);
}
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
 <div class="container">
       <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></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
   </div>

Код для онлайн-тестирования предоставляется в https://codepen.io/prakashdude/pen/xxGpjap

...