Recently, I've been experimenting with creating a parallax website and have been following the helpful steps outlined by Keith Clark. However, I've run into an issue that seems to be specific to Firefox. Upon loading the site, I noticed that the first layer and the darkseagreen background layer are being cut in half. If I adjust the translateZ property from -1px to 0, the elements load correctly but then the parallax effect stops working. After scrolling down or resizing the browser window, the rest of the content becomes visible, but I would prefer for it to display properly upon the initial load.
You can view my code on CodePen. I am using Firefox version 80.0.
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 100vh 0;
width: 100%;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
background-color: darkseagreen;
width: 100%;
}
.title {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
}