I am trying to create a pure CSS parallax effect. It is working great in Firefox (122.0.1), but not in Chrome (121.0.6167.139).
In Firefox, the background image is scaled down and you can see the parallax effect when scrolling, but in Chrome the image is not scaled down and there is no parallax effect.
I have posted a (kind of) minimal example below, I can't figure out what's going on... any ideas?
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;
}
Thanks!
Kudos to @Leothelion, the answer was just removing
overflow: hiddenfrom.parallax-container.