Question

我一直在研究基于Keith Clark's implementation的纯CSS视差效果，并且我已经按照我想要的方式在Chrome和Firefox中使用它，但在Edge中，视差不起作用。

我会对此感到满意，因为没有视差效果它看起来没问题，所以它适合逐行增强，除了Edge实际上打破了背景图像。如果向下滚动足够远，然后向上滚动，图像的某些部分将会丢失。

以下是代码示例：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS Parallax Sample</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>

.body-parallax {
    perspective: 1px;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100vh;
}

.parallax-group {
    height: 80vh;
}

.parallax_layer--back {
    position: absolute;
    z-index: -2;
    top: 0;
    bottom: 0;
    right: 0;
    left: -6px;
    transform: translateZ(-1px) scale(2);
}

.parallax_layer--back img {

    height:50vw;
    width:100vw;
}

.parallax_layer--base {
    position: absolute;
    height: 33vw;
    width: 66vw;
    top: 5vh;
    left: 20vw;
    right: 20vw;
    width: 60vw;
    background-color: rgba(40,40,40,.6);
    transform: translateZ(0);
}

.home-hero {
    height: 80vh;
    background-color: transparent;
}

section {
    margin-left: 0;
    margin-right: 0;
    background-color: white;
    padding: 20px 10px;
}
.parallax_layer--base>img {
    height: 22vw;
    width: 44vw;
    position: relative;
    top: 10%;
    left: 5vw;
    right: 5vw;
}

.home-intro {
    height: 1200px;
}
    </style>
  </head>
  <body>
    <header>

    </header>
     <div class="body-parallax">
      <section class="home-hero">
        <div class="parallax_group">
          <div class="parallax_layer parallax_layer--back">
            <img 
              alt="background image"
              src="https://cdn.sstatic.net/Sites/stackoverflow/company/Img/bg-so-header.png?v=6207408854fe">
            </div>
            <div class="parallax_layer parallax_layer--base">
              <img
                height="25vw"
                width="50vw"
                alt="A logo"
                src="http://cdn.sstatic.net/Sites/stackoverflow/img/polyglot-404.png">
            </div>
          </div>
      </section>
      <section class="home-intro">

      </section>
     </div>
  </body>
</html>

我已检查caniuse.com，我正在使用的perspective和transform样式被列为完全支持。

注意：我发现this bug report与Edge中缺乏工作视差有关，并尝试了将transform: translateZ(0px);添加到父级的linked workaround。这导致Edge中的视差滚动，但是当滚动图像经过屏幕顶部然后返回到屏幕时，我仍然会让图像撕裂。

我的实施有问题吗？

Answer 1

这是一个带有Edge的confirmed issue，所以看起来我的实现似乎也不错。

为什么我的图像在Edge中打破了纯CSS视差滚动？

1 个答案: