The website URL: 4genderjustice.org
While this layout functions properly in most browsers, notably Firefox seems to be causing issues. The question remains: why is it not functioning as expected in Firefox?
The background images are configured like so:
#top .homepage-cover-photo{
position: relative;
}
#top .homepage-cover-photo .x-container {
position: absolute;
clip: none;
clip-path: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
#top .homepage-cover-photo .x-column.x-1-1 .bgimg {
position: absolute;
background-attachment: fixed;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -3;
}
This should display correctly on most up-to-date browsers.
(Each individual .bgimg element contains the actual background images.)
However, a workaround was implemented for Chrome/Webkit/Blink (potentially including Blink and webkit browsers) due to rendering inconsistencies mentioned here:
.Chrome #top .homepage-cover-photo .x-container,
.Opera #top .homepage-cover-photo .x-container,
.iPhone #top .homepage-cover-photo .x-container,
.iPad #top .homepage-cover-photo .x-container,
.Safari #top .homepage-cover-photo .x-container {
clip: rect(auto,auto,auto,auto);
clip-path: rect(auto,auto,auto,auto);
-webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);
}
.Chrome #top .homepage-cover-photo .x-column.x-1-1 .bgimg,
.Opera #top .homepage-cover-photo .x-column.x-1-1 .bgimg,
.iPhone #top .homepage-cover-photo .x-column.x-1-1 .bgimg,
.iPad #top .homepage-cover-photo .x-column.x-1-1 .bgimg,
.Safari #top .homepage-cover-photo .x-column.x-1-1 .bgimg {
position: fixed;
background-attachment: scroll;
-webkit-transform-style: preserve-3d;
}
This workaround relies on browser sniffing (apologies, but it's the only effective solution that could be devised).