简单 CSS 视差在 Chrome 中创建空白

Question

我正在尝试为网站制作视差布局。遵循一个最终结果很好但对我的需求来说太多的教程，所以我只离开了前两层。但这会导致最后一层正下方有一个大的白色 space，我只看到 en chrome 而不是 firefox，但不知道如何摆脱。这是一个 jsfiddle 片段，如您所见，它的代码非常少，但我找不到它的来源。当然，如果您在 chrome.

中打开它，错误只会显示在 fiddle 中

/* Parallax base styles
  --------------------------------------------- */

  .parallax {
    height: 500px; /* fallback for older browsers */
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
    -webkit-perspective-origin-x: 100%;
    perspective-origin-x: 100%;
  }

  .parallax__group {
    position: relative;
    height: 500px; /* fallback for older browsers */
    height: 100vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform-origin-x: 100%;
    transform-origin-x: 100%;
  }

  .parallax__layer--fore {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);
    z-index: 1;
  }

  .parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
  }

  .parallax__layer--back {
    -webkit-transform: translateZ(-290px) scale(2);
    transform: translateZ(-290px) scale(2);
    z-index: 3;
  }

  .parallax__layer--deep {
    -webkit-transform: translateZ(-600px) scale(3);
    transform: translateZ(-600px) scale(3);
    z-index: 2;
  }
  
  /* demo styles */
  
  body, html {
    overflow: hidden;
  }

  body {
    font: 100% / 1.5 Arial;
  }

  * {
    margin:0;
    padding:0;
  }

  .parallax {
    font-size: 200%;
  }

   /* centre the content in the parallax layers */
  .title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  #group1 {
    z-index: 5; /* slide over group 2 */
  }
  #group1 .parallax__layer--base {
    background: rgb(102,204,102);
  }

  #group2 {
    z-index: 3; /* slide under groups 1 and 3 */
  }
  #group2 .parallax__layer--back {
    background: rgb(123,210,102);
  }

<div class="parallax">
        <div id="group1" class="parallax__group">
          <div class="parallax__layer parallax__layer--base">
            <div class="title">Base Layer</div>
          </div>
        </div>
        <div id="group2" class="parallax__group">
          <div class="parallax__layer parallax__layer--back">
            <div class="title">Background Layer</div>
          </div>
        </div>
      </div>

Answer 1

我想你的预期结果是这样的。

棘手的是你需要将背景图层的位置设置为绝对位置而不是相对位置。那样你会更容易管理。

您的代码不起作用的原因是浏览器可能会将您的背景读取为相对位置首先，然后然后您的内部div你设置成绝对的，transform:translateZ(-290px)，这样最下面就有一个space。再举个例子，就像你设置一个 div 高度为 600px，然后设置 padding-bottom 为 400px，这意味着高度是 600px，但实际内容将是 200px。你知道 css 相当 stupid.Haha

/* Parallax base styles
  --------------------------------------------- */

  .parallax {
overflow-x: hidden;
    overflow-y: auto;
     -webkit-perspective: 300px; 
    perspective: 300px;
  }

  .parallax__group {

  }

  .parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform-origin-x: 100%;
    transform-origin-x: 100%;
  }

  .parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
  }

  .parallax__layer--back {
background: rgb(123,210,102);
  }



  .parallax {
    font-size: 200%;
  }

   /* centre the content in the parallax layers */
  .title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  #group1 {
  position: relative;
  height: 100vh;
      -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    z-index: 5; /* slide over group 2 */
  }
  #group1 .parallax__layer--base {
    background: rgb(102,204,102);
  }

  #group2 {
    z-index: 3;
    position: absolute;
    width: 100%;
    transform: translateZ(-290px) scale(2);
    height: 100vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

<div class="parallax">
        <div id="group1" class="parallax__group">
          <div class="parallax__layer parallax__layer--base">
            <div class="title">Base Layer</div>
          </div>
        </div>
        <div id="group2" class="parallax__group">
          <div class="parallax__layer parallax__layer--back">
            <div class="title">Background Layer</div>
          </div>
        </div>
      </div>

简单 CSS 视差在 Chrome 中创建空白

Simple CSS parallax creates whitespace in Chrome

html

css

parallax