Chrome Only Loading Background Images in Viewport

[Jeremy Englert]

I am attempting to create a website that has multiple 100% height divs. It functions great on all browsers except for Google Chrome.

In Chrome, it only loads background images if they are in the viewport when the website initially loads.

Here is the code I’m using for the 100% height divs.

.home-module-3 {
    url("wp-content/themes/aquadopa/library/images/running-stance.jpg") no-repeat scroll center center / cover  rgba(0, 0, 0, 0) 
    background-attachment: fixed !important;
    height: 100vh;
    overflow: visible;
    padding: 20rem 0rem 10rem 0rem;     
}

Demo Link: http://mcfaddengavender.net/dev/aquadopa/

Any ideas? I can’t seem to track down the issue.

[Paulie_D]

Doesn’t seem likely that this is a CSS issue.

More likely to be JS/JQ

[Jeremy Englert]

Oddly enough, I’m not using any JS/JQ for the full-height DIV. However, maybe a different element is causing the issue. Still digging around.

[Jeremy Englert]

The issue resolves itself when I remove the “background-attachment: fixed;” – is this not supported in Chrome?

[Jeremy Englert]

Shane, I’ll work on creating a test sample now.

But from what I’ve been reading, it’s a known bug in Chrome (background: cover and background-attachment: fixed don’t play nicely together).

I’ve found a couple of fixes, but none seem to be working for me. Let me work getting a reduced test example up.

[Jeremy Englert]

http://codepen.io/JeremyE/full/brdcm

Oddly enough, it is working in this reduced test case. Comparing it to the live code to see where the hang-up is.

[Author]

Posts