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

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;
}

}

Just a couple of general observations: In your code you have `.container { flex: 1; }`. This has no effect, because the parent container (`.wrap`) is not a flex container. A [flex formatting context](https://www.w3.org/TR/css-flexbox-1/#flex-containers) exists *only* between parent and child. Descendants of a flex container beyond the children do not honor flex properties. — Michael Benjamin, Jun 01 '16 at 00:09
Second, also on `.container`, you're using percentage padding. If this element is indeed meant to be a flex item, keep in mind that percentage padding and margin are discouraged: http://stackoverflow.com/a/36783414/3597276 — Michael Benjamin, Jun 01 '16 at 00:12

score 0 · Answer 1 · answered May 31 '16 at 20:56

0

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.

answered May 31 '16 at 20:56

shall

154
9

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

1 Answers1