Or not rendering at all, I should say...
http://samnorris.co.nz
testing in Version 34.0.1847.131, two of my fixed background sections are not displaying, for example:
No idea what I've done that Chrome doesn't like - not a big user of Chrome actually (I'm a Firefox man), although I realize that's no excuse for a web designer! Works fine in Firefox.
Is it that the multiple backgrounds technique is not compatible with Chrome or something? (as I just realized only these two sections use it)
I checked to see it wasn't something stupid like an AdBlock plugin blocking something from loading, but that doesn't appear to be the case..
.spacesuit-bg and .interact-bg are the two culprits, both with somewhat similar CSS...
.spacesuit-bg {
background: url("../img/spacesuit-bg.jpg") no-repeat 0 0;
color: #fff;
height: 680px;
text-align: center;
text-transform: uppercase;
-webkit-transform: translate3d(0,0,0);
display: block;
}
.multiplebgs .spacesuit-bg {
background-image: url("../img/tech-seperator.png"), url("../img/tech-seperator-bottom.png"), url("../img/spacesuit-bg.jpg");
background-position: 0 0, 0 bottom, center bottom;
background-repeat: repeat-x, repeat-x, no-repeat;
-webkit-background-size:auto auto, auto auto, !important;
-moz-background-size:auto auto, auto auto, cover!important;
-o-background-size:auto auto, auto auto, !important;
background-size:auto auto, auto auto, cover !important;
}
@media only screen and (min-width: 1200px) {
.spacesuit-bg {
-moz-background-size:cover;
background-size:cover;
}
}
@media only screen and (min-width:1240px) {
.spacesuit-bg {
background-attachment: scroll, scroll, fixed;
/* min-height: 800px; */
}
}
@media only screen and (min-width:2503px) {
.spacesuit-bg {
-webkit-background-size:auto auto, auto auto,;
-moz-background-size:auto auto, auto auto, cover;
-o-background-size:auto auto, auto auto,;
background-size:auto auto, auto auto, cover;
max-height: 0;
padding: 400px 0;
}
}
Second background-less section:
.interact-bg {
background: transparent url("../img/interact-bg.jpg") no-repeat 0 0;
color: #fff;
display: table;
max-height: 980px;
padding: 20% 0;
text-align: center;
text-transform: uppercase;
width: 100%;
-webkit-transform: translate3d(0,0,0);
}
.multiplebgs .interact-bg {
background-image: url("../img/interact-seperator.png"), url("../img/interact-seperator-bottom.png"), url("../img/interact-bg.jpg");
background-position: 0 0, 0 bottom, center bottom;
background-repeat: repeat-x, repeat-x, no-repeat;
background-size: auto auto, auto auto, cover!important;
}
@media only screen and (min-width: 1200px) {
.interact-bg {
background-size: cover;
}
}
@media only screen and (min-width:1240px) {
.interact-bg {
background-attachment: scroll, scroll, fixed;
}
}
@media only screen and (min-width:2503px) {
.interact-bg {
background-size: auto auto, auto auto, cover;
max-height: 0;
padding: 400px 0;
}
}
.interact-wrapper {
width: 100%;
}
.interact-wrapper:before {
/* this is the important part */
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
/* this just takes care of whitespace added by having display:inline-block (there are other methods) */
margin-left: -0.25em;
}