Question

我怀着最良好的祝愿，创造了一个利用视差的网站。虽然Chrome和Safari上的一切看起来都不错，但Firefox正在扼杀一些东西。

该网站可在此处找到： http://pm-devtest.herokuapp.com/

尝试在Firefox中向下滚动页面。图像在随机时间消失，就在它们到达屏幕顶部之前，有些东西甚至根本无法渲染。如果您想查看差异，请随时在Chrome中查看。

虽然你们都可能会发表评论来发布相关代码，但考虑到项目的结构以及错误围绕图像渲染的方式，这很难。我创建了一个非常粗糙的笔here，它可以提取页面上的所有CSS。然而，它没有图像所以它没有显示多少。

具体来说，它与视差CSS（当然......）有关，我将在这里发布。

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

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

  &#group1 {
    // height: 700px;
  }

  &#group2 {
    margin-bottom: 5400px;
    // height: 1350px;
  }

  &#group3 {
    margin-bottom: 1700px;
    // height: 1100px;
  }

  &#group4 {
    margin-bottom: 3000px;
  }

  &#group5 {
    margin-bottom: 2400px;
    // height: 1200px;
  }

  &#group6 {
    margin-bottom: 5400px;
  }

  &#group7 {
    margin-bottom: 1500px;
    // height: 1100px;
  }

  &#group8 {
    margin-bottom: 2400px;
  }

  &#group9 {
    margin-bottom: 1350px;
    // height: 1350px;
  }

  &#group10 {
    margin-bottom: 3200px;
  }

  &#group3half {
    height: 100px;
    height: 1vh;
  }

  .quote1 {
    margin-top: 1150px;
  }

  .quote2 {
    margin-top: 750px;
  }

  .roots {
    margin-top: 1000px;
  }

  &.small {
    height: 250px; /* fallback for older browsers */
    height: 25vh;
  }

  &.slow-img {
    height: 20px;
    height: 1vh;
    text-align: center;
  }

  &.xsmall-spacer {
    margin-bottom: 300px;
  }

  &.small-spacer {
    margin-bottom: 800px;
  }

  &.small-medium-spacer {
    margin-bottom: 1100px;
  }

  &.spacer {
    margin-bottom: 1600px;
  }

  &.medium-spacer {
    margin-bottom: 2400px;
  }

  &.large-spacer {
    margin-bottom: 3200px;
  }

  &.xlarge-spacer {
    margin-bottom: 4000px;
  }

  &.xxlarge-spacer {
    margin-bottom: 5300px;
  }
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

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

.parallax__layer--before {
  .transform(translateZ(-100px) scale(1.2));
  z-index: 1;
}

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

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

.parallax__layer--deep {
  .transform(translateZ(-600px) scale(3));
  z-index: 2;
}

.parallax__layer--deep-back {
  .transform(translateZ(-450px) scale(2.5));
  z-index: 2;
}


/* demo styles
--------------------------------------------- */

.parallax {
  font-size: 200%;
}

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

/* style the groups
--------------------------------------------- */

div[id^="group"] {
  margin-left: -15px;
  margin-right: -15px;
}

#group1 {
  z-index: 5; /* slide over group 2 */
}
#group1half {
  z-index: 6;
}
#group2 {
  z-index: 3; /* slide under groups 1 and 3 */
}
#group3 {
  z-index: 4; /* slide over group 2 and 4 */
}
#group3half {
  z-index: 6;
}

#group4 {
  z-index: 2; /* slide under group 3 and 5 */
}
#group5 {
  z-index: 3; /* slide over group 4 and 6 */
}
#group6 {
  z-index: 2; /* slide under group 5 and 7 */
}
#group7 {
  z-index: 3; /* slide over group 7 */
}

老实说，我在我的智慧结束时，只是想看看是否有人能想出为什么会发生这种情况。我已经清除了缓存，因此它不是缓存问题。

Firefox - 图像在滚动时消失或不呈现

0 个答案: