Header div disappears in Safari when screen width more than 1024px? - html

Question

I'm trying to iron out browser inconsistancies in a website I've been building, and my main issue is that in Safari the header disappears when the screen width is more than 1024px. It's not just the image that isn't visable, everything inside the header is gone. It's fine at a narrower width, and in Firefox, Chrome and Opera.
Has anyone else experienced this? Does anyone know how to fix it?
Link to my Codepen below...
http://codepen.io/ajbater7/pen/aZzmjy
/******************************
GENERAL
******************************/
body {
font-family: "Montserrat","Open Sans","Arial",sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
box-sizing: border-box;
}
.container {
flex: 1;
}
a {
text-decoration:none;
}
img {
max-width: 100%;
}
.top {
width: 20px;
height: 20px;
}
/******************************
CONTAINER
******************************/
.container {
padding-left: 5%;
padding-right: 5%;
margin: 50px auto;
}
a, a:visited {
color: #222222;
}
/******************************
HEADING
******************************/
.banner {
position: relative;
}
.name {
text-align:center;
margin: 0;
}
.name a {
padding-left: 10px;
padding-right: 10px;
display: block;
color: #fff;
}
.video-loop {
object-fit: cover;
width: 100%;
height: 100%;
background-color: black;
display: none;
}
.main-image {
object-fit: cover;
width: 100%;
height: 100%;
background-color: black;
position: relative;
}
.main-header {
position: relative;
width: 100%;
height: 100%;
}
.name-nav {
margin: auto;
position: absolute;
bottom: 20px; right: 0; left: 0;
}
h1 {
text-transform: uppercase;
font-family: "Montserrat","Open Sans","Arial",sans-serif;
font-weight: normal;
font-size: 1em;
line-height: 1.2em;
letter-spacing: 3px;
}
/******************************
NAVIGATION
******************************/
.main-nav {
text-align: center;
padding:5px 10px;
margin: 0;
font-family: "Montserrat","Open Sans","Arial",sans-serif;
font-weight: normal;
font-size: .7em;
text-transform: uppercase;
list-style-type: none;
letter-spacing: 2px;
}
.main-nav li {
margin-top: 8px;
margin-bottom: 8px;
}
.main-nav a {
font-weight: 300;
padding-left: 15px;
padding-right: 15px;
display: block;
color: #fff;
transition-duration: .5s;
transition-property: color;
}
.main-nav .selected, .main-nav a:hover {
color: #ffae00;
}
.main-nav .current {
color: #ffae00;
}
/******************************
GALLERY
******************************/
.feature {
text-transform: uppercase;
font-size: .7em;
margin-bottom: 25px;
color: #ffae00;
letter-spacing: 2px;
text-align: center;
}
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
text-align: center;
justify-content: center;
max-width: 900px;
margin: auto;
}
.thumb {
position: relative;
overflow: hidden;
max-width: 260px;
max-height: 100%;
line-height: 0;
margin: 10px;
}
.image-container img {
max-width: 100%;
}
.thumb:hover img, .thumb:focus img {
transform: scale(1.37);
transition-duration: .4s;
transition-timing-function: ease-out;
}
.photo-overlay {
position: absolute;
color: #fff;
top: 0;
right: 0;
bottom: 0;
left: 0%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
background-color: rgba(255, 174, 0, .8);
text-align: left;
opacity: 0;
transition: opacity .7s ease-out;
}
.photo-overlay:hover {
opacity: 1;
}
.photo-overlay h3 {
font-size: 1em;
letter-spacing: 2px;
text-transform: uppercase;
margin: 5px 0;
border-bottom: 1px solid #fff;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 15px;
}
#top-line1, #top-line2, #top-line3 {
border: none;
padding-bottom: 5px;
}
.photo-overlay p {
margin: 5px 0;
font-size: .7em;
letter-spacing: 1px;
padding-top: 5px;
}
#behind {
padding-top: 0;
margin-top: 0;
}
/******************************
PAGE:ABOUT
******************************/
.about {
display: flex;
flex-direction: column;
align-items: center;
}
.showreel {
margin-bottom: 30px;
}
.about h3,
p {
font-size: 0.8em;
font-weight: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2em;
}
/******************************
PAGE:CONTACT
******************************/
.contact-info {
list-style-type: none;
text-align: center;
padding: 0;
}
.contact-info img {
border-radius: 100%;
width: 80px;
height: 80px;
}
.contact-info h3 {
text-transform: uppercase;
letter-spacing: 2px;
}
.contact-info p {
font-size: 0.8em;
line-height: 2em;
letter-spacing: 1px;
}
.contact-info li {
padding-top: 20px;
padding-bottom: 20px;
}
/******************************
PAGE:FOOTER
******************************/
footer {
font-size: 0.7em;
text-align: center;
clear: both;
padding-top: 50px;
padding-bottom: 30px;
color: white;
background-color: #222222;
margin-top: auto;
}
footer h3 {
text-transform: uppercase;
letter-spacing: 2px;
/*
text-align: center;
*/
}
.social-icon {
width: 30px;
height: 30px;
margin: 0 5px;
}
.scroll img {
height: 20px;
width: 20px;
}
.scroll {
margin-top: 20px;
}
/******************************
MEDIA QUERIES
******************************/
#media (min-width: 769px) {
.container {
max-width:85%;
margin: 80px auto;
padding: 0 10%;
}
.main-header,
.main-nav {
display: flex;
}
.main-header {
flex-direction: column;
align-items: center;
}
.main-nav {
justify-content: center;
font-size: 0.8em;
}
.feature {
font-size: .8em;
}
.name-nav {
position: absolute;
bottom: 20px;
}
h1 {
font-size: 1.5em;
}
.contact-info {
display: flex;
width: 600px;
align-content: center;
justify-content: space-between;
margin: auto;
}
.contact-info li {
flex-basis: 25%;
}
}
#media (min-width: 1025px) {
.main-image {
display: none;
}
.video-loop {
display: unset;
}
/*
.video-loop {
visibility: visible;
}
*/
.main-header {
min-height: 100%;
min-width: 100%;
}
.name-nav {
display: flex;
flex-direction: row;
justify-content: space-between;
position: absolute;
bottom: 20px;
}
.contact-info {
width: 800px;
}
.name {
padding-left: 5%;
}
.main-nav {
padding-right: 5%;
}
.about {
flex-direction: row-reverse;
justify-content: center;
align-items: center;
}
.showreel {
max-width: 50%;
margin-left:40px;
}
.info {
max-width: 40%;
margin-right: 40px;
text-align: center;
}
}

Answer 1

Look here: flex
Click in the tab "known issue"
- In Chrome and Safari, the height of (non flex) children are not recognized in percentages. However Firefox and IE recognize and scale the children based on percentage heights.