纯CSS视差-Firefox translationZ问题？加载时仅可见一半内容

问题描述

我正在摆弄一个视差网站，一直按照Keith Clark的步骤逐步了解视差。但是，我偶然发现了一个看起来像Firefox问题的问题？加载时，将第一层和深海绿色背景层切成两半。如果我将translateZ属性从-1px更改为0，则所有内容均已正确加载，但视差效果不再起作用。如果我向下滚动或调整浏览器的大小，其余的可见，但是我希望在初始加载时可见。

Link to codepen我正在使用Firefox 80.0。

.parallax {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .parallax__layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 100vh 0;
    width: 100%;
  }

  .parallax__layer--base {
    transform: translateZ(0);
  }

  .parallax__layer--back {
    transform: translateZ(-1px);
    background-color: darkseagreen;
    width: 100%;
  }

  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    color: #fff;
    text-align: center;
  }

解决方法

就我而言，这是一个继承的“溢出：隐藏”，不必要地裁剪了FireFox中的内容。

通读我发现的原始文档：

对元素进行分组时要记住的一个重要规则是无法剪辑组的内容。设置溢出：隐藏在 parallax__group将打破视差效果。未剪辑的内容将导致后代元素溢出，因此我们需要发挥创造力使用组的z-index值来确保内容正确在访客滚动浏览文档时显示/隐藏。

为此，您必须巧妙地处理z-index，这在我的方法中有点问题，但是我可以解决。

尤其是通过使用交叉观察器。一旦达到某个交点，z索引就会翻转。这使整个代码更加复杂，这是我所担心的，但它似乎可以工作。

html parallax