我一直在研究基于 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 中缺乏工作视差的问题，并尝试了
linked workaround添加 transform: translateZ(0px); 到父级。这会导致 Edge 中出现视差滚动，但当我将图像滚动到屏幕顶部，然后再向下滚动到屏幕时，图像仍然会撕裂。
我的实现有问题吗？
最佳答案
这是一个带有 Edge 的 confirmed issue，所以看起来我的实现在其他方面可能是合理的。
关于html - 为什么我的图像在 Edge 中因纯 CSS 视差滚动而中断？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40642574/