纯 css 中的视差效果在 Firefox 上不起作用

如何解决纯 css 中的视差效果在 Firefox 上不起作用

我想在我的网站上创建一个简单的视差效果。请检查此代码并请帮助：为什么在滚动此页面时此视差效果不起作用？

这个问题是因为当我滚动页面时，里面的一个元素不能比里面的其他元素滚动得更快。我不知道为什么这不起作用...你能帮我解决这个问题吗？

<body>
    <div class="parallax">
        <div class="parallax_layer parallax_layer_back">
            ...<br><br>
            Adam
        </div>
        <div class="parallax_layer parallax_layer_base">
            ...<br><br>
            Marina
        </div>
    </div>
</body>

<style>
    body {
        margin: 0;
    }
    .parallax {
        perspective: 2px;
        -moz-perspective: 2px;
        height: 120vh;
        overflow-x: hidden;
        overflow-y: auto;
        background: rgba(100,100,0.5);
    }
  
    .parallax_layer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
  
    .parallax_layer_base {
        top: 100px;
        background: rgba(0,200,109,0.5);
        transform: translateZ(0px);
        -moz-transform: translateZ(0px);
    }
          
    .parallax_layer_back {
        background: rgba(100,209,0.5);
        transform: translateZ(-2px);
        -moz-transform: translateZ(-2px);
    }
          
</style>