我正在尝试创建一个纯 CSS 视差效果。它在 Firefox (122.0.1) 中运行良好，但在 Chrome (121.0.6167.139) 中运行不佳。
在 Firefox 中，背景图像会按比例缩小，滚动时可以看到视差效果，但在 Chrome 中，图像不会按比例缩小，也没有视差效果。
我在下面发布了一个（某种）最小的示例，我不知道发生了什么......有什么想法吗？
https://codepen.io/Matt-Parlane/pen/qBvJvKy
<!DOCTYPE html>
<html>
<body>
<div id="window">
<div class="parallax-container" id="image1">
<div class="parallax-content">
<div class="fixed-content">
<h1 class="section-title">BIG HEADLINE</h1>
<a href="#" class="section-btn">BUTTON</a>
</div>
<a href="#section2" class="section-ang">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 8L12 16L20 8" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</a>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
:root {
--perspective: 2px;
--speed-factor: 3.0;
--parallax-z-index: calc(-1.0 * var(--speed-factor) * var(--perspective));
--scale-factor: 4;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.container {
max-width: 1200px;
padding-left: 20px;
padding-right: 20px;
margin: auto;
}
.container-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
}
.container-title {
font-size: 22px;
font-weight: 400;
font-style: normal;
color: #494c50;
letter-spacing: 6px;
margin-bottom: 25px;
}
.section-title {
max-width: 880px;
margin-bottom: 15px;
text-align: center;
font-size: 55px;
font-weight: 400;
font-style: normal;
line-height: 60px;
text-shadow: 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .3);
color: #fff;
}
.section-btn {
display: inline-block;
text-decoration: none;
padding: 10px 40px;
background-color: #b2ae92;
color: #333;
text-align: center;
cursor: pointer;
font-size: 14px;
font-family: 700;
border-radius: 3px;
transition: all 0.2s;
}
.section-ang {
position: absolute;
bottom: 50px;
margin: auto;
}
.section-ang:hover svg path {
stroke: #999;
}
.parallax-container {
height: 500px;
width: 100%;
}
#window {
width: 100vw;
height: 100vh;
perspective: var(--perspective);
overflow-x: hidden;
overflow-y: auto;
}
#window,
#window * {
transform-style: preserve-3d;
}
.parallax-container {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.section-content {
background: #fff;
}
.parallax-container::after {
content: "";
display: block;
height: 100vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transform-origin: center;
transform: translateZ(var(--parallax-z-index)) scale(var(--scale-factor));
}
#image1::after {
background-image: url("https://images.unsplash.com/photo-1705768199489-193d858e61be?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDc3MDc3Mjd8&ixlib=rb-4.0.3&q=85");
}
.fixed-content {
display: flex;
flex-direction: column;
align-items: center;
}
.parallax-content {
position: absolute;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
谢谢！
感谢@Leothelion，答案只是从
overflow: hidden.parallax-container