CSS Grid looks fine on Firefox but not on Chrome or Safari

Question

My layout looks as I expect in Firefox, but not in Safari or Chrome.

The white header element should be above the photo, not overlapping it.

CodePen Example: https://codepen.io/ivanoats/pen/byvXdq

HTML:

<header role="banner">
<div class="logo">
  <div class="logotype">Good&nbsp;❖&nbsp;Paddle</div>
</div>
<nav class="main-nav">
  <input type="checkbox" id="menu-toggle">
  <label for="menu-toggle" class="label-toggle"></label>
  <nav class="nav-wrapper">
    <ul role="navigation">
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Blog</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
  </nav>
</nav>
</header>
<div class="container">
 <section class="hero">
   <h1>What makes a good paddle?</h1>
   <h2>
     <a href="#">Let me know</a>
   </h2>
   <img src="https://goodpaddle.com/images/semiahmoo.jpg" alt="pic of good stroke">
   <p>Blade fin unlimited waves leash catch fin valve. Laird PFD aloha whitewater SUP dana point sesh kook foil, PFD board
    bag downwind dana point PFD..</p>
  </section>
</div>

CSS:

*,
*::before,
*::after {
    box-sizing: inherit;
 }

html {
  font-kerning: normal;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;
}

ol,
ul {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, Helvetica, Arial,
  sans-serif;
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 20%);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 90%;
  margin-left: 5vw;
  margin-right: 5vw;
}

.main-nav {
  margin-top: 0.5em;
}

.nav-wrapper {
  margin: 0 auto;
  max-width: 960px;
  padding: 0;
}


.main-nav ul li {
  margin-left: 0.5em;
  margin-right: 0.5em;
  display: inline-block;
}

.main-nav ul li a {
  color: #000;
  padding: 1em;
  text-decoration: none;
  transition: all 0.5s ease;
}

.logo { width: 15%; }

}

.hero {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  display: grid;
  grid-column: 1 / 6;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero img {
  max-width: 100%;
  min-width: 100%;
  z-index: -1;
  grid-column: 1 / -1;
  grid-row: 1 / 4;
  object-fit: fill;
  opacity: 0.85;
}

.hero p {
  grid-column: 1 / -1;
  grid-row: 4 / 5;
  align-self: center;
  width: 66%;
  justify-self: center;
  font-size: calc(0.75rem + 1vw);
  line-height: 1.5;
  margin: 0;
}


.content {
  grid-column: 2 / 5;
  grid-row-start: 3;
  min-height: 200px;
  line-height: 1.5em;
  font-size: 1.3em;
}

What am I doing wrong, or how should I fix it for the currently available versions of Chrome and Safari?

Your question will no longer be useful for future visitors as soon as you fix the issue on your website. If you need a developer to fix your website, hire one. If you want to ask a question from which anyone with a similar issue might learn, please follow the recommendations in [ask]. In short, provide a [mcve] inside the question itself, which is not prone to change after the question has been answered. That is to say: most people who you want to have a look at your issue will not open the website on general principles. — tao, May 24 '19 at 19:05
your `grid-template-rows: repeat(5, 20%);` seems to be the issue not supported currently or not implemented correctly in Chrome. try altering that or vendor prefixing different code on it. — Rikin, May 24 '19 at 19:18
@Rikin, it's not that, it's `align-items: center`. It should be `align-items: safe center`. At core, it's a duplicate of [this issue](https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container) and it's a shared problem between overflowing centered children, regardless of axis or centering method. The proposed solution for `grid` and `flexbox` is adding "`safe`" to the alignment term, but it's not yet widely adopted. — tao, May 24 '19 at 20:21
Thanks @AndreiGheorghiu for the feedback. I have made a codepen and will update the question: https://codepen.io/ivanoats/pen/byvXdq — Ivan -Oats- Storck, May 24 '19 at 22:47
use some framework like bootstrap, build a solid grid system is a struggle, you will find bugs after bugs writing on your own :) — GJCode, May 25 '19 at 22:44
Consider focusing on two issues (both touched upon above): (1) You're setting your row heights to 20%. But there's no parent reference, so the rule fails. The row heights you set are not working in any browser. (2) `align-items: center` is misaligning your layout. I'll post two duplicates that will explain more. — Michael Benjamin, May 25 '19 at 23:01
For people marking as a dup please explain why instead of just punting, it would be so much more helpful. — Ivan -Oats- Storck, May 26 '19 at 00:32
I specifically explained why in my comment to your question. I didn't simply post the duplicates or "punt". I wrote my rationale first. The duplicates further expound on my two points. — Michael Benjamin, May 26 '19 at 00:35

CSS Grid looks fine on Firefox but not on Chrome or Safari

0 Answers0