html - 为什么具有 ::before 和 ::after 的多个 div 在 chrome 中具有单个背景图像，而 Firefox 显示多个背景图像？

Question

我的代码在 chrome 中运行良好，但在 Firefox 中表现不同。在这里，我使用带有伪元素::after和::before的多个 div ，它们在 chrome 网络浏览器中运行时将所有 div 元素的背景图像作为单个（许多 div ≡ 一个背景图像）。
但在 Firefox 中，单独的 div 元素获取每个背景图像（许多 div ≡ 许多背景图像）。那么如何解决火狐浏览器的这个问题呢？

我使用的示例 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

标签： htmlcssbackgroundbackground-imagepseudo-element