Я работал над чистым эффектом параллакса CSS, основанным на Keith Clark's implementation, и я получил его, работая так, как я хочу, в Chrome и Firefox, но в Edge параллакс не работает.Почему мое изображение ломается в 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 в связи с отсутствием работы параллакса в Edge, и попытался linked workaround добавления transform: translateZ(0px); к родителю. Это приводит к прокрутке параллакса в Edge, но я все равно получаю разрывание изображения при прокрутке изображения в верхней части экрана, а затем обратно вниз на экран.
Есть ли что-то не так с моей реализацией?