0

I've been working on a pure CSS parallax effect based upon Keith Clark's implementation, and I've gotten it working the way I want it to in Chrome and Firefox, but in Edge the parallax doesn't work.

I would be okay with this, since it looks okay without the parallax effect, so it fits within progressive enhancement, except that Edge actually breaks the background image. If you scroll down far enough, then scroll back up, sections of the image will be missing.

Here is a sample of the code:

<!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>

I've checked caniuse.com, and the perspective and transformstyles I'm using are listed as fully supported.

Note: I found this bug report relating to the lack of working parallax within Edge, and tried the linked workaround of adding transform: translateZ(0px); to the parent. This results in parallax scrolling in Edge, but I still get the image tearing when scrolling the image past the top of the screen, then back down onto the screen.

Is there something wrong with my implementation?

Beofett
  • 2,388
  • 1
  • 23
  • 37

1 Answers1

1

This is a confirmed issue with Edge, so it seems perhaps my implementation is otherwise sound.

Beofett
  • 2,388
  • 1
  • 23
  • 37