为什么我的图像在 Edge 中因纯 CSS 视差滚动而中断？

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/Whosebug/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/Whosebug/img/polyglot-404.png">
            </div>
          </div>
      </section>
      <section class="home-intro">

      </section>
     </div>
  </body>
</html>

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

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

我的实现有问题吗？

Answer 1

这是一个带有 Edge 的 confirmed issue，所以我的实现似乎在其他方面还不错。

为什么我的图像在 Edge 中因纯 CSS 视差滚动而中断？

Why is my image breaking in Edge for pure CSS parallax scrolling?

html

css

parallax

microsoft-edge