纯 CSS 视差背景在 Firefox 中不起作用

如何解决纯 CSS 视差背景在 Firefox 中不起作用

问题

我正在尝试将视差背景放入具有严格尺寸 (width: 100%,height: 200px) 的 div 中并剪切其余部分 (overflow: hidden)。这在 Chrome 中运行良好，但 Firefox 似乎不喜欢 .wrapper-div。一旦我使用 transform-style-div（我需要剪切图像），它看起来似乎没有应用 perspective 和/或 .wrapper。

问题

Firefox 有限制吗？ （希望有解决方法？）

在 Chrome 中工作的示例（但不在 Firefox 中）：

body {
  margin: 0px;
}

.main {
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

.wrapper {
  position: relative;
  overflow:hidden;
  height: 200px;
  border: 1px dashed green;
}

.parallax-background {
  position: absolute;
  height: 100vh;
  width: 100%;
  z-index: -1;
  top: 0;
  right:0;
  left: 0;
  bottom: 0;
  transform: translateZ(-1px) scale(2.5);
  background-image: linear-gradient(#ccc 50%,#777 50%);
  background-size: 50px 50px;
  overflow: hidden;
}

<div class="main">
  <div class="container">
    <h1>A</h1>
  </div>
  <div class="wrapper">
    <div class="parallax-background"></div>
    Some Content
  </div>
  <div class="container">
    <h1>B</h1>
  </div>
  <div class="wrapper">
    <div class="parallax-background"></div>
    Some more Content
  </div>
  <div class="container">
    <h1>C</h1>
  </div>
</div>