0
私はKeith Clark's implementationに基づいて純粋なCSSの視差効果に取り組んできましたが、私はそれをChromeとFirefoxで使いたいと思っていましたが、Edgeでは視差が働きません。純粋なCSS視差スクロールのために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はエッジ内の作動視差の欠如に関連した、と親にtransform: translateZ(0px);を追加する linked workaroundを試してみました。この結果、Edgeで視差スクロールが発生しますが、画像を画面の上をスクロールしてから画面に戻すと、画像が裂けます。
私の実装に何か問題はありますか？