我一直在做一个基于Keith Clark实现的纯CSS视差效果，我已经让它按照我想要的方式在Chrome和Firefox中工作，但在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样式被列为完全支持。
注意:我发现了这个关于Edge中缺乏工作视差的bug报告，并尝试了将transform: translateZ(0px);添加到父级的链接解决方案。这会导致在Edge中出现视差滚动，但是当我将图像滚动过屏幕顶部，然后再向下滚动到屏幕上时，我仍然会看到图像撕裂。
我的实现有问题吗?
这是Edge的一个确认问题，所以看起来我的实现可能是合理的。