Beofett Beofett - 12 days ago 4
CSS Question

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

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
transform
styles 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?

Answer

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

Comments