My banner is not visible in Safari 5.1.7 - css

Question

This page I am developing has a different layout on Safari than Chrome/Firefox
Here is how it looks in Safari
Here is how it looks in Firefox
As you can see, the top banner isn't showing on Safari and i think it's because of the parallax CSS I have added for the banner if I'm not completely wrong here.
Here is the CSS:
.slide {
position: relative;
padding: 15vh 1%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
#title {
background-image: url("http://bildeopplaster.no/8Kk");
background-attachment: fixed;
}
.carsonshold { position: relative; width: 100%; display: block; border-bottom: 1px solid #ccc; }
.carsonshold img { padding: 20px; display: block; border: none; }
#thesedays { padding: 10px 20px; margin: 40px 0; background: #fff; border: 1px solid #ccc; }
#results { padding: 10px 20px; background: #fff; border: 1px solid #ccc; font-family: monospace; }
.text-link {
border: none;
background: none;
padding: 0;
margin: 0;
font-size: 0.85em;
cursor: pointer;
}
Can anyone see why the banner isn't showing up on Safari or what am I missing here?

Answer 1

The first issue is you are using vh units for that element. Unfortunately, Safari didn't support vh and vw units until Version 6 (unprefixed in Version 6.1).
The second issue is that you are using the background: 50% 50% / cover; property-value pair. That is also not a supported value in Safari 5.1.7. You need to remove the / cover bit for it to work in Safari 5.1.7. Safari 5.1.7 should support background-size: cover;, but it seems like it doesn't support the shorthand version you're trying to use here.
Using these values will fix it, more or less:
.slide, .slide::before {
background: 50% 50%;
}
.slide {
padding: 15%;
min-height: 100%;
width: 100%;
}
With that being said, this shouldn't be an issue, because people who use Safari as their main browser will probably be on OS X, which means they'll be on a newer version of Safari. It's unlikely anyone will be using Safari on Windows for their main browser. Then again, it's possible, considering there are still Opera 12 users out there...