Search code examples
htmlcssfirefoxwebkitblink

background images not loading in Firefox

The url: 4genderjustice.org

This works fine in all browsers (as far as I can tell), except Firefox. The question is: why does it not work in Firefox?

The background images are set up like this:

#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 render fine in most modern browsers.

(The actual background images are set in the individual .bgimg elements.)

However, due to Chrome/Webkit/Blink (not 100% sure, I thought it was Blink, but it also happens in webkit browsers) not rendering these right, I put in a fix described 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 is done via browser sniffing (sorry, but it’s the only solution I could figure out that works).

Solution

  • Simply remove z-index: -3; from #top .homepage-cover-photo .x-column.x-1-1 .bgimg and problem solved.

    Also worth noting that it only worked in Chrome for me beforehand.