javascript - 背景附件：固定；不在 Firefox 中工作，但在 chrommw 和 edge 中工作

Question

我想在一个容器内创建多个立方体并在悬停时旋转它们，所有正面都将有一个共同的背景图像（它们的正面整体代表一个背景）。这在 chrome 和 edge 中实现得很好，但在 Firefox 中不起作用。唯一的问题制造者是 background-attachment: fixed;

https://codepen.io/lax-man7274/pen/xxgNqpz

请在 Firefox 上查看此代码。

function createSlab() {
  for (let i = 0; i < noOfSlide; i++) {
    //create slab
    const slab = document.createElement("div");
    slab.classList.add("slab");
    slab.style.height = interval + "%";
    slab.style.width = "100%";
    slab.style.transition =
      "transform " +
      transitionDelay +
      "s " +
      transitionType +
      " " +
      delay * i +
      "s";

    //insert slab inside card div
    card.appendChild(slab);
    //create background class
    const background = document.createElement("div");
    background.classList.add("background");
    slab.appendChild(background);
    //create info
    const info = document.createElement("div");
    info.classList.add("info");
    slab.appendChild(info);
  }
}
const allSlabs = card.children;

function positionSlab() {
  for (let i = 0; i < noOfSlide; i++) {
    allSlabs[i].style.top = position + "%";
    position += interval;
  }
}

createSlab();

positionSlab();

.card {
  -webkit-perspective: 400px;
          perspective: 400px;
  height: 100%;
  width: 100%;
  -webkit-transform: translateZ(-150px) rotate(0deg);
          transform: translateZ(-150px) rotate(0deg);
}

/* .card:hover .slab {
  transform: translateZ(-150px) rotateY(45deg);
}
 */
.slab {
  position: absolute;
  left: 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ(-150px) rotate(0deg);
          transform: translateZ(-150px) rotate(0deg);
}

.slab > div {
  background-attachment: fixed;
  -webkit-background-attachment:fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  background: url(./bg2.jpg);
  -webkit-transform: rotateY(0deg) translateZ(150px);
          transform: rotateY(0deg) translateZ(150px);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.info {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateY(-90deg) translateZ(150px);
          transform: rotateY(-90deg) translateZ(150px);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(24, 34, 175, 0.973)), to(rgba(29, 2, 2, 0.993)));
  background: linear-gradient(rgba(24, 34, 175, 0.973), rgba(29, 2, 2, 0.993));
  color: white;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

<div class="cover">
      <div class="card">
        <!-- Below Commented HTML code is dynamically generated using javascript -->
        <!--  <div class="slab">
          <div class="background"></div>
          <div class="info">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam,
            repudiandae.
          </div>
        </div>
        -->
      </div>
    </div>

标签： javascripthtmlcss