You are my final hope. I made a decision to add an update to the Page of my brother's store. One of the new features I wanted was a simple parallax background with two layers to create a sense of depth while scrolling.
At first, I managed to make it work using a bit of JS, adjusting the position on scroll events with a multiplier. However, I soon realized that the performance of the background was sticky, sluggish, stuttering, and not visually pleasing in Firefox. It seemed to be related to the "Asynchronous Panning" feature of the browser.
Click here for the JS-Version of the page update
After some time searching online, I couldn't find a way to disable or bypass that feature, so I decided to attempt a CSS-only implementation instead.
And wouldn't you know it? Firefox was the browser that couldn't display everything as intended!
Initially, I tried putting all my content into divs with the hope that a common parent div would allow me to use "height: 100%;" to scale the divs together. Unfortunately, this approach didn't work because the background overflowed over my content. The challenge arose from wanting the background images to repeat on the y-axis and move at a slower pace than the content, which required specifying a specific height for the background divs larger than the content height.
I even attempted setting the height of the background divs with jQuery using:
$(#background).height($(.main_content_container).height());
but the background kept turning out either too large or too short.
When my idea with the parent div failed, I turned to working directly with the body and my content container to create perspective. Would setting all heights to 100% have worked? Whenever I set height: 100%;, I always got my viewport's height...
My current approach involves creating perspective and applying transforms with the body causing the overflow-y:
body {
overflow-y: auto;
overflow-x: hidden;
perspective: 1px;
width: 100%;
margin-left: 0px;
margin-top: 0px;
position: fixed;
height: 100vh;
transform-style: preserve-3d;
align-items: center;
align-content: center;
align-self: center;
text-align: left;
width: 100vw;
}
#background {
position: fixed;
bottom: 0;
left: 0;
transform: translateZ(-2px) scale(3);
width: 100vw;
background-size: 100vw;
background-image: url(websiteimage.png);
left: 0;
right: 0;
top: 0;
height: 500vh;
min-width: 100vw;
}
#background2 {
position: fixed;
bottom: 0;
left: 0;
transform: translateZ(-3px) scale(4);
background-image: url(websiteimage2.png);
background-size: 100vw;
left: 0;
right: 0;
top: 0;
height: 500vh;
min-width: 100vw;
opacity: 80%;
}
div.main_content_container {
transform: translateZ(0);
height: 100%;
background-color: transparent;
color: Silver;
max-width: 100vw;
width: 70%;
min-height: 100%;
}
Live demo (only startpage and only in dark mode is functional at the moment)
Why does Chrome crop the bottom of the background divs correctly, but Firefox creates visible overflow? Is there any chance of getting one of my solutions to work smoothly and properly formatted in Firefox?
I've been struggling with this for days now, and I appreciate any ideas or suggestions.
PS: This is my first post on StackOverflow. I hope I provided enough information and didn't violate any rules since this site has often helped me navigate the world of amateur web design.
PPS: I'm aware that my code is somewhat messy after all the tinkering, but I've been experimenting for days now