align-self not aligning content in container with height 100% in Safari

Question

I have a section containing a picture tag. The picture tag is done with a srcSet of images for responsive design and using multiple pictures without downloading the pictures that are not being in use.

We need to center the text on said container, so I have a div with display: grid inside. This is absolute positioned and using height: 100% and width: 100%.

Using align-self: center on the child works perfectly on Chrome and Firefox, but to not my surprise, Safari decided to not cooperate. I discovered that if I set the section (or the grid) to a set height (ie: height: 5000px) it actually aligns itself to the center of the div, which makes me think Safari does not want to align-self: center and a unkown sized div.

There are multiple ways to solve this, but we a using our own library that is using grid, that's why I would like to solve it using align-self: center as we can just pass the prop to the React Component.

Do you guys know a workaround?

Here I left a fiddle. If you visit it on Chrome or Firefox, it works, but if you visit it on Safari, it does not. I also commented a line where I set a specific height to prove that it works with that on Safari.

Thanks!

.container {
  position: relative;
}

.grid {
  position: absolute;
  height: 100%;
  /* height: 1000px; */
  width: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.75);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.cell {
  grid-column: 1 / span 1;
  align-self: center;
}

img {
  width: 100%
}

<div class='container'>
  <img src='https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2600/v1553227874/production/city/hero_image_27_1553227874.jpg' />
  <div class='grid'>
    <div class='cell'>
      Hello
    </div>
  </div>
</div>

Michael Benjamin · Answer 1 · 2020-05-09T03:01:29.760

The problem is that Safari does not recognize a percentage height unless the parent has a defined height. That's old school CSS. Other browsers have evolved past that requirement, now accepting other references for percentage heights.

So, if you're going to use a percentage height on .grid, the parent needs a fixed height for it to work on Safari. Or, set percentage heights on the ancestors all the way up to the root element.

/* NEW */
html, body, .container, img {
  height: 100%;
}

.container {
  position: relative;
}

.grid {
  position: absolute;
  height: 100%;
  /* height: 1000px; */
  width: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.75);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.cell {
  grid-column: 1 / span 1;
  align-self: center;
}

img {
  width: 100%
}

<div class='container'>
  <img src='https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2600/v1553227874/production/city/hero_image_27_1553227874.jpg' />
  <div class='grid'>
    <div class='cell'>
      Hello
    </div>
  </div>
</div>

More details:

Thanks so much for your answer! I tried this just to use it as a Mock and it starts working... kind of. The thing is, a 100% is not always the correct size, and we use the `picture` element and mantain the aspect ratio of the div. Is there a possible solution for this? As `height: auto` is not valid to meet the condition for Safari. On possible fix that I did is determining if is safari and using Javascript to set the height of the hero section to the image height and that works, but agent sniffing always sounds like a dissaster waiting to happen for me. — Hector Mendoza Jacobo, May 10 '20 at 01:15

align-self not aligning content in container with height 100% in Safari

1 Answers1